@coveord/plasma-mantine 52.27.4 → 53.0.0

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -1,30 +1,83 @@
-import {Group} from '@mantine/core';
-import {FunctionComponent, ReactNode, useEffect} from 'react';
+import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';
+import {cloneElement, ReactElement, ReactNode, useEffect} from 'react';
 
-import {Button} from '../button';
-import {useInlineConfirm} from './useInlineConfirm';
+import {useInlineConfirm} from './InlineConfirmContext';
+import {Button} from '../button/Button';
 
-interface InlineConfirmPromptProps {
+interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'> {
+    /**
+     * Unique id to map the prompt to the target
+     */
     id: string;
-    label: ReactNode;
-    onConfirm: () => void;
-    confirmLabel?: ReactNode;
-    cancelLabel?: ReactNode;
+    /**
+     * Label element
+     *
+     * @default Are you sure?
+     */
+    label?: ReactNode;
+    /**
+     * Confirm button element
+     *
+     * @default <Button color="red">Delete</Button>
+     */
+    confirm?: ReactElement;
+    /**
+     * Cancel button element
+     *
+     * @default <Button variant="outline">Cancel</Button>
+     */
+    cancel?: ReactElement;
+    /**
+     * Function called when the confirm button is clicked
+     */
+    onConfirm?(): void;
+
+    /**
+     * Function called when the cancel button is clicked
+     */
+    onCancel?(): void;
 }
 
-export const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({
-    id,
-    label,
-    confirmLabel = 'Delete',
-    cancelLabel = 'Cancel',
-    onConfirm,
-}) => {
+export type InlineConfirmPromptFactory = Factory<{
+    props: InlineConfirmPromptProps;
+    ref: HTMLDivElement;
+}>;
+
+const defaultProps: Partial<InlineConfirmPromptProps> = {
+    label: 'Are you sure?',
+    confirm: <Button color="red">Delete</Button>,
+    cancel: <Button variant="outline">Cancel</Button>,
+    gap: 'xs',
+    wrap: 'nowrap',
+};
+
+export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {
+    const {id, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
+        'InlineConfirmPrompt',
+        defaultProps,
+        props,
+    );
     const {confirmingId, clearConfirm} = useInlineConfirm();
 
-    const onClickConfirm = () => {
-        onConfirm();
-        clearConfirm();
-    };
+    if (!isElement(cancel) || !isElement(confirm)) {
+        throw new Error(
+            'InlineConfirm.Prompt component cancel & confirm props should be elements or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported',
+        );
+    }
+    const cancelEl = cloneElement(cancel, {
+        onClick: () => {
+            cancel.props.onClick?.();
+            onCancel?.();
+            clearConfirm();
+        },
+    });
+    const confirmEl = cloneElement(confirm, {
+        onClick: () => {
+            confirm.props.onClick?.();
+            onConfirm?.();
+            clearConfirm();
+        },
+    });
 
     useEffect(() => {
         if (confirmingId !== id) {
@@ -34,16 +87,12 @@ export const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> =
 
     if (confirmingId === id) {
         return (
-            <Group spacing="xs" noWrap>
+            <Group ref={ref} {...others}>
                 {label}
-                <Button onClick={onClickConfirm} color="red">
-                    {confirmLabel}
-                </Button>
-                <Button onClick={clearConfirm} variant="outline">
-                    {cancelLabel}
-                </Button>
+                {confirmEl}
+                {cancelEl}
             </Group>
         );
     }
     return null;
-};
+});

package/src/components/inline-confirm/InlineConfirmTarget.tsx

@@ -0,0 +1,26 @@
+import {createPolymorphicComponent} from '@mantine/core';
+import {forwardRef, MouseEventHandler} from 'react';
+import {Button, ButtonProps} from '../button';
+import {useInlineConfirm} from './InlineConfirmContext';
+
+export interface InlineConfirmTargetProps extends ButtonProps {
+    id: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const InlineConfirmTarget = createPolymorphicComponent<typeof Button, InlineConfirmTargetProps>(
+    forwardRef(
+        (
+            {onClick, id, component: Component = Button, ...others}: InlineConfirmTargetProps & {component?: any},
+            ref,
+        ) => {
+            const {setConfirmingId} = useInlineConfirm();
+            const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+                setConfirmingId(id);
+                onClick?.(e);
+            };
+
+            return <Component ref={ref} onClick={handleOnClick} {...others} />;
+        },
+    ),
+);

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -1,4 +1,4 @@
-import {Menu} from '@mantine/core';
+import {Button, Menu, MenuItem} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
 import {InlineConfirm} from '../InlineConfirm';
@@ -15,9 +15,9 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Button id="delete" onClick={onClickSpy}>
+                <InlineConfirm.Target id="delete" onClick={onClickSpy}>
                     Delete
-                </InlineConfirm.Button>
+                </InlineConfirm.Target>
             </InlineConfirm>,
         );
 
@@ -36,9 +36,9 @@ describe('InlineConfirm', () => {
                         <button>open menu</button>
                     </Menu.Target>
                     <Menu.Dropdown>
-                        <InlineConfirm.MenuItem id="delete" onClick={onClickSpy}>
+                        <InlineConfirm.Target component={MenuItem} id="delete" onClick={onClickSpy}>
                             Delete
-                        </InlineConfirm.MenuItem>
+                        </InlineConfirm.Target>
                     </Menu.Dropdown>
                 </Menu>
             </InlineConfirm>,
@@ -54,8 +54,8 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={vi.fn()} />
+                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
+                <InlineConfirm.Prompt id="my-button-id" />
             </InlineConfirm>,
         );
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
@@ -72,29 +72,28 @@ describe('InlineConfirm', () => {
         const confirmSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
+                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
                 <InlineConfirm.Prompt
                     id="my-button-id"
-                    label="Are you sure?"
-                    confirmLabel="I confirm"
-                    cancelLabel="I changed my mind"
-                    onConfirm={confirmSpy}
+                    label="Remove?"
+                    confirm={<Button onClick={confirmSpy}>I confirm</Button>}
+                    cancel={<Button>I changed my mind</Button>}
                 />
             </InlineConfirm>,
         );
 
         await user.click(screen.getByRole('button', {name: 'Remove'}));
-        expect(screen.getByText('Are you sure?')).toBeVisible();
+        expect(screen.getByText('Remove?')).toBeVisible();
 
         await user.click(screen.getByRole('button', {name: 'I changed my mind'}));
-        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(screen.queryByText('Remove?')).not.toBeInTheDocument();
         expect(confirmSpy).not.toHaveBeenCalled();
 
         await user.click(screen.getByRole('button', {name: 'Remove'}));
-        expect(screen.getByText('Are you sure?')).toBeVisible();
+        expect(screen.getByText('Remove?')).toBeVisible();
 
         await user.click(screen.getByRole('button', {name: 'I confirm'}));
-        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(screen.queryByText('Remove?')).not.toBeInTheDocument();
         expect(confirmSpy).toHaveBeenCalledTimes(1);
     });
 
@@ -102,11 +101,21 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={vi.fn()} />
+                <InlineConfirm.Target id="remove">Remove</InlineConfirm.Target>
+                <InlineConfirm.Prompt
+                    id="remove"
+                    label="Delete X?"
+                    confirm={<Button>I confirm</Button>}
+                    cancel={<Button>Cancel</Button>}
+                />
 
-                <InlineConfirm.Button id="print">Print</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="print" label="Print?" onConfirm={vi.fn()} />
+                <InlineConfirm.Target id="print">Print</InlineConfirm.Target>
+                <InlineConfirm.Prompt
+                    id="print"
+                    label="Print?"
+                    confirm={<Button>Yes</Button>}
+                    cancel={<Button>No, save the trees</Button>}
+                />
             </InlineConfirm>,
         );
 
@@ -126,9 +135,9 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Button id="delete" onClick={onClickSpy} disabled disabledTooltip="You shall not pass">
+                <InlineConfirm.Target id="delete" onClick={onClickSpy} disabled disabledTooltip="You shall not pass">
                     Delete
-                </InlineConfirm.Button>
+                </InlineConfirm.Target>
             </InlineConfirm>,
         );
 

package/src/components/inline-confirm/index.ts

@@ -1,3 +1,2 @@
 export * from './InlineConfirm';
-export * from './useInlineConfirm';
 export * from './InlineConfirmContext';

package/src/components/prompt/Prompt.module.css

@@ -0,0 +1,45 @@
+.root {
+    &[data-variant='success']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-lime-6);
+        }
+    }
+    &[data-variant='warning']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-yellow-5);
+        }
+    }
+    &[data-variant='critical']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-red-6);
+        }
+    }
+    &[data-variant='info']&[data-size] {
+        .header {
+            background-color: var(--mantine-color-navy-5);
+        }
+    }
+}
+
+.title {
+    color: var(--mantine-color-white);
+}
+
+.header {
+    width: 100%;
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    font-size: var(--mantine-h3-font-size);
+    line-height: var(--mantine-h3-line-height);
+    overflow-wrap: anywhere;
+    padding-top: var(--mantine-spacing-md);
+    padding-bottom: var(--mantine-spacing-md);
+}
+
+.whiteClose {
+    @mixin light {
+        color: var(--mantine-color-white);
+        @mixin hover {
+            background-color: transparent;
+        }
+    }
+}

package/src/components/prompt/Prompt.tsx

@@ -1,37 +1,8 @@
-import {color} from '@coveord/plasma-tokens';
-import {createStyles, Modal, ModalProps} from '@mantine/core';
+import {Box, Modal, ModalProps} from '@mantine/core';
 import {Children, ReactElement, ReactNode} from 'react';
+import PromptClasses from './Prompt.module.css';
 import {PromptFooter} from './PromptFooter';
 
-const useStyles = createStyles((theme) => ({
-    body: {
-        padding: 0,
-    },
-    modalType: {overflow: 'hidden', width: 550},
-    innerBody: {
-        padding: `${theme.spacing.md} ${theme.spacing.xl} ${theme.spacing.lg}`,
-    },
-    header: {
-        padding: `${theme.spacing.md} ${theme.spacing.xl}`,
-        width: '100%',
-        borderBottom: `1px solid ${theme.colors.gray[3]}`,
-        fontSize: theme.headings.sizes.h3.fontSize,
-        lineHeight: theme.headings.sizes.h3.lineHeight,
-        overflowWrap: 'anywhere',
-    },
-    success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},
-    warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},
-    critical: {
-        backgroundColor: theme.colors.red[6],
-        color: color.primary.pureWhite,
-    },
-    info: {backgroundColor: theme.colors.navy[5], color: color.primary.pureWhite},
-    whiteClose: {color: color.primary.pureWhite, '&:hover': {backgroundColor: 'transparent'}},
-    title: {
-        color: color.primary.pureWhite,
-    },
-}));
-
 export interface PromptProps extends ModalProps {
     /**
      * Controls prompt appearance
@@ -46,31 +17,24 @@ interface PromptType {
     Footer: typeof PromptFooter;
 }
 
-export const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {
+export const Prompt: PromptType = ({children, ...otherProps}) => {
     const {classNames: classesProps, ...otherPropsWithoutClasses} = otherProps;
-    const {classes, cx} = useStyles();
     const convertedChildren = Children.toArray(children) as ReactElement[];
 
     const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
     const footer = convertedChildren.find((child) => child.type === PromptFooter);
 
     const classNames = {
-        header: cx(classes.header, classes[variant]),
-        close: classes.whiteClose,
-        body: classes.body,
-        modal: classes.modalType,
-        title: classes.title,
+        root: PromptClasses.root,
+        header: PromptClasses.header,
+        close: PromptClasses.whiteClose,
+        body: PromptClasses.body,
+        title: PromptClasses.title,
     };
 
     return (
-        <Modal
-            variant="prompt"
-            padding={0}
-            classNames={{...classNames, ...classesProps}}
-            size={'sm'}
-            {...otherPropsWithoutClasses}
-        >
-            <div className={classes.innerBody}>{otherChildren}</div>
+        <Modal variant="prompt" classNames={{...classNames, ...classesProps}} size="sm" {...otherPropsWithoutClasses}>
+            <Box className={PromptClasses.innerBody}>{otherChildren}</Box>
             {footer}
         </Modal>
     );

package/src/components/prompt/PromptFooter.tsx

@@ -4,5 +4,7 @@ import {StickyFooter, StickyFooterProps} from '../sticky-footer';
 export interface PromptFooterProps extends StickyFooterProps {}
 
 export const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (
-    <StickyFooter {...otherProps}>{children}</StickyFooter>
+    <StickyFooter p={0} pt="lg" {...otherProps}>
+        {children}
+    </StickyFooter>
 );

package/src/components/sticky-footer/StickyFooter.module.css

@@ -0,0 +1,11 @@
+.root {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background-color: white;
+    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.border {
+    border-top: 1px solid var(--mantine-color-gray-3);
+}

package/src/components/sticky-footer/StickyFooter.tsx

@@ -1,68 +1,60 @@
-import {
-    Box,
-    createStyles,
-    DefaultProps,
-    Divider,
-    Group,
-    GroupPosition,
-    MantineNumberSize,
-    Selectors,
-    useComponentDefaultProps,
-} from '@mantine/core';
-import {forwardRef, ReactNode} from 'react';
+import {Factory, Group, GroupProps, StylesApiProps, factory, useProps, useStyles} from '@mantine/core';
+import clsx from 'clsx';
+import {ReactNode} from 'react';
+import classes from './StickyFooter.module.css';
 
-export interface StickyFooterProps extends DefaultProps<Selectors<typeof useStyles>> {
+export interface StickyFooterProps
+    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars'>,
+        StylesApiProps<StickyFooterFactory> {
     /**
      * Whether a border is render on top of the footer
      */
     borderTop?: boolean;
-    /**
-     * Position of the children within the footer
-     *
-     * @default 'right'
-     */
-    position?: GroupPosition;
-    /**
-     * Defines the spacing between footer children
-     *
-     * @default 'sm'
-     */
-    spacing?: MantineNumberSize;
     /**
      * Footer's children, usually buttons
      */
     children?: ReactNode;
 }
 
-const useStyles = createStyles((theme) => ({
-    root: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 10,
-        backgroundColor: 'white',
-    },
-    footer: {
-        padding: theme.spacing.lg,
-    },
-    divider: {},
-}));
+export type StickyFooterStylesNames = 'root';
+
+export type StickyFooterFactory = Factory<{
+    props: StickyFooterProps;
+    ref: HTMLDivElement;
+    stylesNames: StickyFooterStylesNames;
+}>;
 
 const defaultProps: Partial<StickyFooterProps> = {
-    spacing: 'sm',
-    position: 'right',
+    gap: 'sm',
+    justify: 'flex-end',
 };
 
-export const StickyFooter = forwardRef<HTMLDivElement, StickyFooterProps>((props, ref) => {
-    const {borderTop, spacing, position, children, className, classNames, styles, unstyled, ...others} =
-        useComponentDefaultProps('StickyFooter', defaultProps, props);
-    const {classes, cx} = useStyles(null, {name: 'StickyFooter', classNames, styles, unstyled});
+export const StickyFooter = factory<StickyFooterFactory>((props, ref) => {
+    const {borderTop, justify, gap, children, className, classNames, style, styles, unstyled, vars, ...others} =
+        useProps('StickyFooter', defaultProps, props);
+    const getStyles = useStyles<StickyFooterFactory>({
+        name: 'StickyFooter',
+        classes,
+        props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+    });
+
+    const css = getStyles('root');
 
     return (
-        <Box ref={ref} className={cx(classes.root, className)}>
-            {borderTop ? <Divider size="xs" className={classes.divider} /> : null}
-            <Group position={position} spacing={spacing} className={classes.footer} {...others}>
-                {children}
-            </Group>
-        </Box>
+        <Group
+            justify={justify}
+            gap={gap}
+            className={clsx(css.className, {[classes.border]: !!borderTop})}
+            style={css.style}
+            ref={ref}
+            {...others}
+        >
+            {children}
+        </Group>
     );
 });

package/src/components/sticky-footer/__tests__/StickyFooter.spec.tsx

@@ -3,11 +3,6 @@ import {render, screen} from '@test-utils';
 import {StickyFooter} from '../StickyFooter';
 
 describe('StickyFooter', () => {
-    it('adds a separator on top the footer if borderTop is true', () => {
-        render(<StickyFooter borderTop>title</StickyFooter>);
-        expect(screen.getByRole('separator')).toBeInTheDocument();
-    });
-
     it('renders children', () => {
         render(
             <StickyFooter>

package/src/components/table/Table.module.css

@@ -0,0 +1,93 @@
+.table {
+    width: 100%;
+}
+
+.header {
+    position: sticky;
+    top: 0;
+    transition: box-shadow 150ms ease;
+    z-index: 1;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-bottom: 1px solid var(--mantine-color-gray-3);
+    }
+}
+
+/* Table.Actions */
+.actionsGroup {
+    display: inline-flex;
+}
+
+/* Table.Filter */
+.filterWrapper {
+    width: 20rem;
+}
+.filterEmpty {
+    color: var(--mantine-color-gray-5);
+}
+
+/* Table.Header */
+.headerRoot {
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-1);
+    padding-left: var(--mantine-spacing-xl);
+    padding-right: var(--mantine-spacing-lg);
+    position: relative;
+}
+
+.headerGridInner {
+    flex-direction: row-reverse;
+}
+
+.headerCol {
+    display: flex;
+}
+
+.th {
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    vertical-align: middle;
+    white-space: nowrap;
+    text-align: left;
+    color: var(--mantine-color-gray-6);
+    height: var(--mantine-spacing-xl);
+    font-weight: 500;
+    font-size: var(--mantine-font-size-xs);
+
+    &:first-of-type {
+        padding-left: var(--mantine-spacing-xl);
+    }
+
+    &:last-of-type {
+        padding-right: var(--mantine-spacing-xl);
+    }
+
+    background-color: var(--mantine-color-gray-0);
+
+    &[data-control='true'] {
+        @mixin hover {
+            background-color: var(--mantine-color-gray-1);
+        }
+    }
+}
+
+.lastUpdatedRoot {
+    min-height: 98px;
+}
+.lastUpdatedLabel {
+    color: var(--mantine-color-gray-6);
+}
+
+/* Table.Predicate */
+.predicateLabel {
+    font-size: var(--mantine-font-size-sm);
+}
+
+/* Table.ColumnsSelector */
+.columnSelector {
+    max-width: 100%;
+}