@coveord/plasma-mantine 49.1.1 → 49.1.2

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,
             },
         },
     },