@coveord/plasma-mantine 49.1.0 → 49.1.2

package/src/components/button/ButtonWithDisabledTooltip.tsx

@@ -1,58 +1,37 @@
-import {Box, Tooltip} from '@mantine/core';
-import {Property} from 'csstype';
-import {forwardRef, MouseEventHandler} from 'react';
+import {Box, Tooltip, TooltipProps} from '@mantine/core';
+import {forwardRef, ReactNode} from 'react';
 
 import {createPolymorphicComponent} from '../../utils';
 
 export interface ButtonWithDisabledTooltipProps {
-    disabled?: boolean;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * The tooltip message to display when disabled
      */
     disabledTooltip?: string;
     /**
-     * The background color when disabled
-     *
-     * @default 'unset'
+     * Whether the button underneath the tooltip is disabled
+     */
+    disabled?: boolean;
+    children?: ReactNode;
+    /**
+     * Additional tooltip props to set on the disabled button tooltip
      */
-    disabledHoverColor?: Property.BackgroundColor;
+    disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;
 }
 
-const _ButtonWithDisabledTooltip = forwardRef<HTMLButtonElement, ButtonWithDisabledTooltipProps>(
-    ({disabledTooltip, disabled, onClick, disabledHoverColor: hoverColor = 'unset', ...others}, ref) =>
+const _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(
+    ({disabledTooltip, disabled, children, disabledTooltipProps, ...others}, ref) =>
         disabledTooltip ? (
-            <Tooltip label={disabledTooltip} disabled={!disabled}>
-                <Box
-                    component="button"
-                    ref={ref}
-                    {...(disabled ? {'data-disabled': true} : {})}
-                    sx={(theme) => ({
-                        '&[data-disabled]': {
-                            pointerEvents: 'all',
-                            color: theme.colors.gray[5],
-                        },
-                        '&[data-disabled]:hover': {
-                            backgroundColor: hoverColor,
-                            cursor: 'not-allowed',
-                        },
-                    })}
-                    onClick={(event) => {
-                        if (disabled) {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        } else {
-                            onClick?.(event);
-                        }
-                    }}
-                    {...others}
-                />
+            <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>
+                <Box ref={ref} sx={{'&:hover': {cursor: 'not-allowed'}}} {...others}>
+                    {children}
+                </Box>
             </Tooltip>
         ) : (
-            <Box component="button" ref={ref} disabled={disabled} onClick={onClick} {...others} />
+            <>{children}</>
         )
 );
 
-export const ButtonWithDisabledTooltip = createPolymorphicComponent<'button', ButtonWithDisabledTooltipProps>(
+export const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(
     _ButtonWithDisabledTooltip
 );

package/src/components/button/__tests__/ButtonWithDisabledTooltip.spec.tsx

@@ -2,40 +2,15 @@ import {render, screen, userEvent} from '@test-utils';
 import {ButtonWithDisabledTooltip} from '../ButtonWithDisabledTooltip';
 
 describe('ButtonWithDisabledTooltip', () => {
-    it('disables the button when disabled prop is true', async () => {
-        const user = userEvent.setup();
-        const onClickSpy = jest.fn();
-        render(
-            <ButtonWithDisabledTooltip disabled onClick={onClickSpy}>
-                save
-            </ButtonWithDisabledTooltip>
-        );
-
-        const button = screen.getByRole('button', {name: /save/i});
-        await user.click(button);
-        expect(button).toBeDisabled();
-        expect(onClickSpy).not.toHaveBeenCalled();
-    });
-
-    it('does not disable the button when disabled prop is false', async () => {
-        const user = userEvent.setup();
-        const onClickSpy = jest.fn();
-        render(<ButtonWithDisabledTooltip onClick={onClickSpy}>save</ButtonWithDisabledTooltip>);
-
-        const button = screen.getByRole('button', {name: /save/i});
-        await user.click(button);
-        expect(button).toBeEnabled();
-        expect(onClickSpy).toHaveBeenCalledTimes(1);
-    });
-
     it('shows a tooltip when hovering over the disabled button', async () => {
         const user = userEvent.setup();
         render(
             <ButtonWithDisabledTooltip disabled disabledTooltip="tooltip message">
-                save
+                <button disabled>save</button>
             </ButtonWithDisabledTooltip>
         );
         const button = screen.getByRole('button', {name: /save/i});
+        expect(button).toBeDisabled();
         expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
         await user.hover(button);
         expect(screen.getByRole('tooltip', {name: /tooltip message/i})).toBeInTheDocument();
@@ -43,10 +18,29 @@ describe('ButtonWithDisabledTooltip', () => {
 
     it('does not show the tooltip when hovering over the button if it is not disabled', async () => {
         const user = userEvent.setup();
-        render(<ButtonWithDisabledTooltip disabledTooltip="tooltip message">save</ButtonWithDisabledTooltip>);
+        render(
+            <ButtonWithDisabledTooltip disabledTooltip="tooltip message">
+                <button>save</button>
+            </ButtonWithDisabledTooltip>
+        );
         const button = screen.getByRole('button', {name: /save/i});
         expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
         await user.hover(button);
         expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
     });
+
+    it('does not render the tooltip if there is no disabled tooltip message', () => {
+        const {container} = render(
+            <ButtonWithDisabledTooltip>
+                <button>save</button>
+            </ButtonWithDisabledTooltip>
+        );
+        expect(container).toMatchInlineSnapshot(`
+            <div>
+              <button>
+                save
+              </button>
+            </div>
+        `);
+    });
 });

package/src/components/collection/Collection.tsx

@@ -141,6 +141,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         allowAdd,
         label,
         labelProps,
+        withAsterisk,
         description,
         descriptionProps,
         error,
@@ -166,8 +167,9 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         onChange?.(value);
     }, [JSON.stringify(value)]);
 
+    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
     const _label = label ? (
-        <Input.Label required={required} {...labelProps}>
+        <Input.Label required={isRequired} {...labelProps}>
             {label}
         </Input.Label>
     ) : null;
@@ -178,10 +180,10 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
     const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
     const _header =
         _label || _description ? (
-            <Box mb="sm">
+            <>
                 {_label}
                 {_description}
-            </Box>
+            </>
         ) : null;
 
     const items = value.map((item, index) => (

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

@@ -2,11 +2,13 @@ import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState}
 
 import {InlineConfirmButton} from './InlineConfirmButton';
 import {InlineConfirmContext} from './InlineConfirmContext';
+import {InlineConfirmMenuItem} from './InlineConfirmMenuItem';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
 type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
     Prompt: typeof InlineConfirmPrompt;
     Button: typeof InlineConfirmButton;
+    MenuItem: typeof InlineConfirmMenuItem;
 };
 
 export const InlineConfirm: InlineConfirmType = ({children}) => {
@@ -27,3 +29,4 @@ export const InlineConfirm: InlineConfirmType = ({children}) => {
 
 InlineConfirm.Prompt = InlineConfirmPrompt;
 InlineConfirm.Button = InlineConfirmButton;
+InlineConfirm.MenuItem = InlineConfirmMenuItem;

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

@@ -1,18 +1,22 @@
-import {HTMLAttributes, MouseEventHandler} from 'react';
+import {Button} from '@mantine/core';
+import {forwardRef, MouseEventHandler} from 'react';
 
-import {Button, ButtonProps} from '../button';
+import {ButtonProps} from '../button';
 import {useInlineConfirm} from './useInlineConfirm';
 
-interface InlineConfirmButtonProps extends ButtonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
+export interface InlineConfirmButtonProps extends ButtonProps {
     id: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
-export const InlineConfirmButton = (props: InlineConfirmButtonProps) => {
-    const {setConfirmingId} = useInlineConfirm();
-    const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-        setConfirmingId(props.id);
-        props.onClick?.(e);
-    };
+export const InlineConfirmButton = forwardRef<HTMLButtonElement, InlineConfirmButtonProps>(
+    ({onClick, id, ...others}, ref) => {
+        const {setConfirmingId} = useInlineConfirm();
+        const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+            setConfirmingId(id);
+            onClick?.(e);
+        };
 
-    return <Button {...props} onClick={onClick} />;
-};
+        return <Button ref={ref} onClick={handleOnClick} {...others} />;
+    }
+);

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

@@ -0,0 +1,21 @@
+import {forwardRef, MouseEventHandler} from 'react';
+
+import {Menu, MenuItemProps} from '../menu';
+import {useInlineConfirm} from './useInlineConfirm';
+
+export interface InlineConfirmMenuItemProps extends MenuItemProps {
+    id: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const InlineConfirmMenuItem = forwardRef<HTMLButtonElement, InlineConfirmMenuItemProps>(
+    ({onClick, id, ...others}, ref) => {
+        const {setConfirmingId} = useInlineConfirm();
+        const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+            setConfirmingId(id);
+            onClick?.(e);
+        };
+
+        return <Menu.Item ref={ref} onClick={handleOnClick} {...others} />;
+    }
+);

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

@@ -1,3 +1,4 @@
+import {Menu} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
 import {InlineConfirm} from '../InlineConfirm';
@@ -25,6 +26,30 @@ describe('InlineConfirm', () => {
         expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
 
+    it('calls the onClick prop when clicking on the menu item', async () => {
+        const user = userEvent.setup({delay: null});
+        const onClickSpy = jest.fn();
+        render(
+            <InlineConfirm>
+                <Menu>
+                    <Menu.Target>
+                        <button>open menu</button>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                        <InlineConfirm.MenuItem id="delete" onClick={onClickSpy}>
+                            Delete
+                        </InlineConfirm.MenuItem>
+                    </Menu.Dropdown>
+                </Menu>
+            </InlineConfirm>
+        );
+
+        await user.click(screen.getByRole('button', {name: /open menu/i}));
+        await user.click(screen.getByRole('menuitem', {name: /delete/i}));
+
+        expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+
     it('replace the children with a prompt when clicking on a button which requires confirmation', async () => {
         const user = userEvent.setup({delay: null});
         render(

package/src/components/menu/Menu.tsx

@@ -2,13 +2,22 @@ import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@manti
 import {forwardRef} from 'react';
 
 import {createPolymorphicComponent, overrideComponent} from '../../utils';
-import {Button, ButtonWithDisabledTooltipProps} from '../button';
+import {ButtonWithDisabledTooltipProps} from '../button';
+import {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip';
 
 export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
 
-const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>((props, ref) => (
-    <Button.DisabledTooltip component={MantineMenu.Item} ref={ref} {...props} />
-));
+const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
+    ({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (
+        <ButtonWithDisabledTooltip
+            disabled={disabled}
+            disabledTooltip={disabledTooltip}
+            disabledTooltipProps={disabledTooltipProps}
+        >
+            <MantineMenu.Item ref={ref} disabled={disabled} {...others} />
+        </ButtonWithDisabledTooltip>
+    )
+);
 
 const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);
 

package/src/theme/Theme.tsx

@@ -112,6 +112,7 @@ export const plasmaTheme: MantineThemeOverride = {
                 color: 'navy',
                 withArrow: true,
                 withinPortal: true,
+                multiline: true,
             },
         },
         Breadcrumbs: {
@@ -183,6 +184,12 @@ export const plasmaTheme: MantineThemeOverride = {
         ColorSwatch: {
             defaultProps: {
                 size: 8,
+                withShadow: false,
+            },
+        },
+        MenuItem: {
+            defaultProps: {
+                fw: 300,
             },
         },
     },