@coveord/plasma-mantine 53.1.4 → 54.0.1

package/src/components/header/__tests__/Header.spec.tsx

@@ -1,52 +1,51 @@
 import {Anchor} from '@mantine/core';
-import {render, screen} from '@test-utils';
+import {render, screen, within} from '@test-utils';
 
 import {Header} from '../Header';
 
 describe('Header', () => {
     it('renders a heading of level 1 with the specified children within', () => {
-        render(<Header>child</Header>);
+        render(
+            <Header>
+                <div data-testid="child" />
+            </Header>,
+        );
 
         const header = screen.getByRole('heading');
-        expect(header).toMatchInlineSnapshot(`
-          <h1
-            class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m-8a5d1357 mantine-Title-root"
-            data-order="1"
-            data-variant="primary"
-            style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
-          >
-            child
-          </h1>
-        `);
+        expect(within(header).getByTestId('child')).toBeVisible();
     });
 
     it('renders the specified breadcrumbs above the title', async () => {
-        const {container, rerender} = render(
+        const {rerender} = render(
             <Header>
-                Title
-                <Header.Breadcrumbs>
+                <Header.Breadcrumbs data-testid="breadcrumbs-after">
                     <Anchor>One</Anchor>
                     <Anchor>Two</Anchor>
                     <Anchor>Three</Anchor>
                 </Header.Breadcrumbs>
+                <div data-testid="title">Title</div>
             </Header>,
         );
-        const titleFirst = container;
+
+        // title follows breadcrumbs even if declared after
+        expect(screen.getByTestId('breadcrumbs-after').compareDocumentPosition(screen.getByTestId('title'))).toBe(
+            Node.DOCUMENT_POSITION_FOLLOWING,
+        );
 
         rerender(
             <Header>
-                <Header.Breadcrumbs>
+                <div data-testid="title">Title</div>
+                <Header.Breadcrumbs data-testid="breadcrumbs-after">
                     <Anchor>One</Anchor>
                     <Anchor>Two</Anchor>
                     <Anchor>Three</Anchor>
                 </Header.Breadcrumbs>
-                Title
             </Header>,
         );
-        const breadcrumbsFirst = container;
-
-        expect(titleFirst).toMatchSnapshot();
-        expect(breadcrumbsFirst).toEqual(titleFirst);
+        // title still follows breadcrumbs
+        expect(screen.getByTestId('breadcrumbs-after').compareDocumentPosition(screen.getByTestId('title'))).toBe(
+            Node.DOCUMENT_POSITION_FOLLOWING,
+        );
     });
 
     it('renders a doc link icon if a doc anchor is provided', async () => {

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -2,30 +2,25 @@
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
-  <style
-    data-mantine-styles="true"
-  >
-    :root{--mantine-webkit-font-smoothing: unset;--mantine-moz-font-smoothing: unset;--mantine-color-black: #282829;--mantine-line-height: 1.5;--mantine-font-family: canada-type-gibson, sans-serif;--mantine-font-family-headings: canada-type-gibson, sans-serif;--mantine-heading-font-weight: 500;--mantine-radius-default: calc(0.5rem * var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-action-filled);--mantine-primary-color-filled-hover: var(--mantine-color-action-filled-hover);--mantine-primary-color-light: var(--mantine-color-action-light);--mantine-primary-color-light-hover: var(--mantine-color-action-light-hover);--mantine-primary-color-light-color: var(--mantine-color-action-light-color);--mantine-spacing-xs: 8px;--mantine-spacing-sm: 16px;--mantine-spacing-md: 24px;--mantine-spacing-lg: 32px;--mantine-spacing-xl: 40px;--mantine-line-height-md: 1.5;--mantine-shadow-xs: 0px 1px 0px rgba(4, 8, 31, 0.08);--mantine-shadow-sm: 0px 2px 4px rgba(4, 8, 31, 0.12);--mantine-shadow-md: 0px 4px 8px rgba(4, 8, 31, 0.08);--mantine-shadow-lg: 0px 8px 16px rgba(7, 12, 41, 0.06);--mantine-shadow-xl: 0px 16px 24px rgba(4, 8, 31, 0.06);--mantine-primary-color-0: var(--mantine-color-action-0);--mantine-primary-color-1: var(--mantine-color-action-1);--mantine-primary-color-2: var(--mantine-color-action-2);--mantine-primary-color-3: var(--mantine-color-action-3);--mantine-primary-color-4: var(--mantine-color-action-4);--mantine-primary-color-5: var(--mantine-color-action-5);--mantine-primary-color-6: var(--mantine-color-action-6);--mantine-primary-color-7: var(--mantine-color-action-7);--mantine-primary-color-8: var(--mantine-color-action-8);--mantine-primary-color-9: var(--mantine-color-action-9);--mantine-color-gray-0: #fcfcfc;--mantine-color-gray-1: #f9f9f9;--mantine-color-gray-2: #f3f3f3;--mantine-color-gray-3: #e5e8e8;--mantine-color-gray-4: #d6dcdd;--mantine-color-gray-5: #b7bcc0;--mantine-color-gray-6: #6c727b;--mantine-color-gray-7: #565b66;--mantine-color-gray-8: #353a3f;--mantine-color-gray-9: #282829;--mantine-color-red-0: #fff8f8;--mantine-color-red-1: #ffd7d3;--mantine-color-red-2: #f3b4ae;--mantine-color-red-3: #ee8279;--mantine-color-red-4: #f05245;--mantine-color-red-5: #e03729;--mantine-color-red-6: #cd2113;--mantine-color-red-7: #a11409;--mantine-color-red-8: #80130a;--mantine-color-red-9: #600a03;--mantine-color-indigo-0: #f2f3ff;--mantine-color-indigo-1: #ced4f4;--mantine-color-indigo-2: #9dabf2;--mantine-color-indigo-3: #687cdf;--mantine-color-indigo-4: #4a61d4;--mantine-color-indigo-5: #2e45ba;--mantine-color-indigo-6: #24389e;--mantine-color-indigo-7: #192b8a;--mantine-color-indigo-8: #101f6b;--mantine-color-indigo-9: #071140;--mantine-color-blue-0: #e7f7ff;--mantine-color-blue-1: #c3ecff;--mantine-color-blue-2: #86d8ff;--mantine-color-blue-3: #46c4ff;--mantine-color-blue-4: #00adff;--mantine-color-blue-5: #029de7;--mantine-color-blue-6: #0387c6;--mantine-color-blue-7: #0173a9;--mantine-color-blue-8: #004c71;--mantine-color-blue-9: #003148;--mantine-color-teal-0: #edfffc;--mantine-color-teal-1: #c2fef5;--mantine-color-teal-2: #50fae3;--mantine-color-teal-3: #1cebcf;--mantine-color-teal-4: #16dcc1;--mantine-color-teal-5: #12c7ae;--mantine-color-teal-6: #0ba893;--mantine-color-teal-7: #078675;--mantine-color-teal-8: #055f53;--mantine-color-teal-9: #033932;--mantine-color-green-0: #dcf3ef;--mantine-color-green-1: #b2e3db;--mantine-color-green-2: #79d1c3;--mantine-color-green-3: #34ad95;--mantine-color-green-4: #1a8973;--mantine-color-green-5: #00634f;--mantine-color-green-6: #045242;--mantine-color-green-7: #043f33;--mantine-color-green-8: #023128;--mantine-color-green-9: #01211b;--mantine-color-lime-0: #f2fff9;--mantine-color-lime-1: #f2fff9;--mantine-color-lime-2: #f2fff9;--mantine-color-lime-3: #f2fff9;--mantine-color-lime-4: #12a344;--mantine-color-lime-5: #12a344;--mantine-color-lime-6: #12a344;--mantine-color-lime-7: #004a20;--mantine-color-lime-8: #004a20;--mantine-color-lime-9: #004a20;--mantine-color-yellow-0: #fffdea;--mantine-color-yellow-1: #fff7ba;--mantine-color-yellow-2: #ffef70;--mantine-color-yellow-3: #ffe300;--mantine-color-yellow-4: #f5d029;--mantine-color-yellow-5: #eac10b;--mantine-color-yellow-6: #e2b104;--mantine-color-yellow-7: #bd9403;--mantine-color-yellow-8: #8f7000;--mantine-color-yellow-9: #493b08;--mantine-color-action-0: #edf6ff;--mantine-color-action-1: #edf6ff;--mantine-color-action-2: #c7e4ff;--mantine-color-action-3: #8bc7ff;--mantine-color-action-4: #399ffe;--mantine-color-action-5: #1372ec;--mantine-color-action-6: #1372ec;--mantine-color-action-7: #1a50ad;--mantine-color-action-8: #1a50ad;--mantine-color-action-9: #062d70;--mantine-color-navy-0: #f5f6ff;--mantine-color-navy-1: #d6d7fd;--mantine-color-navy-2: #aeb0f1;--mantine-color-navy-3: #8787db;--mantine-color-navy-4: #6b6bbd;--mantine-color-navy-5: #525296;--mantine-color-navy-6: #3f3f71;--mantine-color-navy-7: #333357;--mantine-color-navy-8: #262646;--mantine-color-navy-9: #181d3a;--mantine-color-info-0: #f5f6ff;--mantine-color-info-1: #d6d7fd;--mantine-color-info-2: #aeb0f1;--mantine-color-info-3: #8787db;--mantine-color-info-4: #6b6bbd;--mantine-color-info-5: #525296;--mantine-color-info-6: #3f3f71;--mantine-color-info-7: #333357;--mantine-color-info-8: #262646;--mantine-color-info-9: #181d3a;--mantine-color-critical-0: #fff8f8;--mantine-color-critical-1: #ffd7d3;--mantine-color-critical-2: #f3b4ae;--mantine-color-critical-3: #ee8279;--mantine-color-critical-4: #f05245;--mantine-color-critical-5: #e03729;--mantine-color-critical-6: #cd2113;--mantine-color-critical-7: #a11409;--mantine-color-critical-8: #80130a;--mantine-color-critical-9: #600a03;--mantine-color-new-0: #edfffc;--mantine-color-new-1: #c2fef5;--mantine-color-new-2: #50fae3;--mantine-color-new-3: #1cebcf;--mantine-color-new-4: #16dcc1;--mantine-color-new-5: #12c7ae;--mantine-color-new-6: #0ba893;--mantine-color-new-7: #078675;--mantine-color-new-8: #055f53;--mantine-color-new-9: #033932;--mantine-color-warning-0: #fffdea;--mantine-color-warning-1: #fff7ba;--mantine-color-warning-2: #ffef70;--mantine-color-warning-3: #ffe300;--mantine-color-warning-4: #f5d029;--mantine-color-warning-5: #eac10b;--mantine-color-warning-6: #e2b104;--mantine-color-warning-7: #bd9403;--mantine-color-warning-8: #8f7000;--mantine-color-warning-9: #493b08;--mantine-color-success-0: #f2fff9;--mantine-color-success-1: #f2fff9;--mantine-color-success-2: #f2fff9;--mantine-color-success-3: #f2fff9;--mantine-color-success-4: #12a344;--mantine-color-success-5: #12a344;--mantine-color-success-6: #12a344;--mantine-color-success-7: #004a20;--mantine-color-success-8: #004a20;--mantine-color-success-9: #004a20;--mantine-color-purple-0: #f2ebf3;--mantine-color-purple-1: #dabfe9;--mantine-color-purple-2: #bb80dc;--mantine-color-purple-3: #9a52c1;--mantine-color-purple-4: #752e9c;--mantine-color-purple-5: #5d237d;--mantine-color-purple-6: #451c5c;--mantine-color-purple-7: #390c53;--mantine-color-purple-8: #2b073f;--mantine-color-purple-9: #180323;--mantine-h1-font-size: 48px;--mantine-h1-line-height: 1.5;--mantine-h1-font-weight: 300;--mantine-h2-font-size: 32px;--mantine-h2-line-height: 1.5;--mantine-h2-font-weight: 500;--mantine-h3-font-size: 24px;--mantine-h3-line-height: 1.5;--mantine-h3-font-weight: 500;--mantine-h4-font-size: 18px;--mantine-h4-line-height: 1.5;--mantine-h4-font-weight: 300;--mantine-h5-font-size: 14px;--mantine-h5-font-weight: 500;--mantine-h6-font-size: 12px;--mantine-h6-font-weight: 500;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-action-4);--mantine-color-gray-light: rgba(108, 114, 123, 0.15);--mantine-color-gray-light-hover: rgba(108, 114, 123, 0.2);--mantine-color-gray-outline-hover: rgba(214, 220, 221, 0.05);--mantine-color-red-light: rgba(205, 33, 19, 0.15);--mantine-color-red-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-red-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-indigo-light: rgba(36, 56, 158, 0.15);--mantine-color-indigo-light-hover: rgba(36, 56, 158, 0.2);--mantine-color-indigo-outline-hover: rgba(74, 97, 212, 0.05);--mantine-color-blue-light: rgba(3, 135, 198, 0.15);--mantine-color-blue-light-hover: rgba(3, 135, 198, 0.2);--mantine-color-blue-outline-hover: rgba(0, 173, 255, 0.05);--mantine-color-teal-light: rgba(11, 168, 147, 0.15);--mantine-color-teal-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-teal-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-green-light: rgba(4, 82, 66, 0.15);--mantine-color-green-light-hover: rgba(4, 82, 66, 0.2);--mantine-color-green-outline-hover: rgba(26, 137, 115, 0.05);--mantine-color-lime-light: rgba(18, 163, 68, 0.15);--mantine-color-lime-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: rgba(226, 177, 4, 0.15);--mantine-color-yellow-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-yellow-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-action-text: var(--mantine-color-action-4);--mantine-color-action-filled: var(--mantine-color-action-8);--mantine-color-action-filled-hover: var(--mantine-color-action-9);--mantine-color-action-light: rgba(19, 114, 236, 0.15);--mantine-color-action-light-hover: rgba(19, 114, 236, 0.2);--mantine-color-action-light-color: var(--mantine-color-action-3);--mantine-color-action-outline: var(--mantine-color-action-4);--mantine-color-action-outline-hover: rgba(57, 159, 254, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-4);--mantine-color-navy-filled: var(--mantine-color-navy-8);--mantine-color-navy-filled-hover: var(--mantine-color-navy-9);--mantine-color-navy-light: rgba(63, 63, 113, 0.15);--mantine-color-navy-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-navy-light-color: var(--mantine-color-navy-3);--mantine-color-navy-outline: var(--mantine-color-navy-4);--mantine-color-navy-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-info-text: var(--mantine-color-info-4);--mantine-color-info-filled: var(--mantine-color-info-8);--mantine-color-info-filled-hover: var(--mantine-color-info-9);--mantine-color-info-light: rgba(63, 63, 113, 0.15);--mantine-color-info-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-info-light-color: var(--mantine-color-info-3);--mantine-color-info-outline: var(--mantine-color-info-4);--mantine-color-info-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-4);--mantine-color-critical-filled: var(--mantine-color-critical-8);--mantine-color-critical-filled-hover: var(--mantine-color-critical-9);--mantine-color-critical-light: rgba(205, 33, 19, 0.15);--mantine-color-critical-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-critical-light-color: var(--mantine-color-critical-3);--mantine-color-critical-outline: var(--mantine-color-critical-4);--mantine-color-critical-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-new-text: var(--mantine-color-new-4);--mantine-color-new-filled: var(--mantine-color-new-8);--mantine-color-new-filled-hover: var(--mantine-color-new-9);--mantine-color-new-light: rgba(11, 168, 147, 0.15);--mantine-color-new-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-new-light-color: var(--mantine-color-new-3);--mantine-color-new-outline: var(--mantine-color-new-4);--mantine-color-new-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-4);--mantine-color-warning-filled: var(--mantine-color-warning-8);--mantine-color-warning-filled-hover: var(--mantine-color-warning-9);--mantine-color-warning-light: rgba(226, 177, 4, 0.15);--mantine-color-warning-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-warning-light-color: var(--mantine-color-warning-3);--mantine-color-warning-outline: var(--mantine-color-warning-4);--mantine-color-warning-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-success-text: var(--mantine-color-success-4);--mantine-color-success-filled: var(--mantine-color-success-8);--mantine-color-success-filled-hover: var(--mantine-color-success-9);--mantine-color-success-light: rgba(18, 163, 68, 0.15);--mantine-color-success-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-success-light-color: var(--mantine-color-success-3);--mantine-color-success-outline: var(--mantine-color-success-4);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-4);--mantine-color-purple-filled: var(--mantine-color-purple-8);--mantine-color-purple-filled-hover: var(--mantine-color-purple-9);--mantine-color-purple-light: rgba(69, 28, 92, 0.15);--mantine-color-purple-light-hover: rgba(69, 28, 92, 0.2);--mantine-color-purple-light-color: var(--mantine-color-purple-3);--mantine-color-purple-outline: var(--mantine-color-purple-4);--mantine-color-purple-outline-hover: rgba(117, 46, 156, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-text: #282829;--mantine-color-anchor: var(--mantine-color-action-6);--mantine-color-dark-light: #C9C9C9;--mantine-color-dark-light-hover: #b8b8b8;--mantine-color-gray-light: #f9f9f9;--mantine-color-gray-light-hover: #f3f3f3;--mantine-color-gray-outline-hover: rgba(108, 114, 123, 0.05);--mantine-color-red-light: #fff8f8;--mantine-color-red-light-hover: #ffd7d3;--mantine-color-red-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-pink-light: #fff0f6;--mantine-color-pink-light-hover: #ffdeeb;--mantine-color-grape-light: #f8f0fc;--mantine-color-grape-light-hover: #f3d9fa;--mantine-color-violet-light: #f3f0ff;--mantine-color-violet-light-hover: #e5dbff;--mantine-color-indigo-light: #f2f3ff;--mantine-color-indigo-light-hover: #ced4f4;--mantine-color-indigo-outline-hover: rgba(36, 56, 158, 0.05);--mantine-color-blue-light: #e7f7ff;--mantine-color-blue-light-hover: #c3ecff;--mantine-color-blue-outline-hover: rgba(3, 135, 198, 0.05);--mantine-color-cyan-light: #e3fafc;--mantine-color-cyan-light-hover: #c5f6fa;--mantine-color-teal-light: #edfffc;--mantine-color-teal-light-hover: #c2fef5;--mantine-color-teal-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-green-light: #dcf3ef;--mantine-color-green-light-hover: #b2e3db;--mantine-color-green-outline-hover: rgba(4, 82, 66, 0.05);--mantine-color-lime-light: #f2fff9;--mantine-color-lime-light-hover: #f2fff9;--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: #fffdea;--mantine-color-yellow-light-hover: #fff7ba;--mantine-color-yellow-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-orange-light: #fff4e6;--mantine-color-orange-light-hover: #ffe8cc;--mantine-color-action-text: var(--mantine-color-action-filled);--mantine-color-action-filled: var(--mantine-color-action-6);--mantine-color-action-filled-hover: var(--mantine-color-action-7);--mantine-color-action-light: #edf6ff;--mantine-color-action-light-hover: #edf6ff;--mantine-color-action-light-color: var(--mantine-color-action-6);--mantine-color-action-outline: var(--mantine-color-action-6);--mantine-color-action-outline-hover: rgba(19, 114, 236, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-filled);--mantine-color-navy-filled: var(--mantine-color-navy-6);--mantine-color-navy-filled-hover: var(--mantine-color-navy-7);--mantine-color-navy-light: #f5f6ff;--mantine-color-navy-light-hover: #d6d7fd;--mantine-color-navy-light-color: var(--mantine-color-navy-6);--mantine-color-navy-outline: var(--mantine-color-navy-6);--mantine-color-navy-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-info-text: var(--mantine-color-info-filled);--mantine-color-info-filled: var(--mantine-color-info-6);--mantine-color-info-filled-hover: var(--mantine-color-info-7);--mantine-color-info-light: #f5f6ff;--mantine-color-info-light-hover: #d6d7fd;--mantine-color-info-light-color: var(--mantine-color-info-6);--mantine-color-info-outline: var(--mantine-color-info-6);--mantine-color-info-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-filled);--mantine-color-critical-filled: var(--mantine-color-critical-6);--mantine-color-critical-filled-hover: var(--mantine-color-critical-7);--mantine-color-critical-light: #fff8f8;--mantine-color-critical-light-hover: #ffd7d3;--mantine-color-critical-light-color: var(--mantine-color-critical-6);--mantine-color-critical-outline: var(--mantine-color-critical-6);--mantine-color-critical-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-new-text: var(--mantine-color-new-filled);--mantine-color-new-filled: var(--mantine-color-new-6);--mantine-color-new-filled-hover: var(--mantine-color-new-7);--mantine-color-new-light: #edfffc;--mantine-color-new-light-hover: #c2fef5;--mantine-color-new-light-color: var(--mantine-color-new-6);--mantine-color-new-outline: var(--mantine-color-new-6);--mantine-color-new-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-filled);--mantine-color-warning-filled: var(--mantine-color-warning-6);--mantine-color-warning-filled-hover: var(--mantine-color-warning-7);--mantine-color-warning-light: #fffdea;--mantine-color-warning-light-hover: #fff7ba;--mantine-color-warning-light-color: var(--mantine-color-warning-6);--mantine-color-warning-outline: var(--mantine-color-warning-6);--mantine-color-warning-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-success-text: var(--mantine-color-success-filled);--mantine-color-success-filled: var(--mantine-color-success-6);--mantine-color-success-filled-hover: var(--mantine-color-success-7);--mantine-color-success-light: #f2fff9;--mantine-color-success-light-hover: #f2fff9;--mantine-color-success-light-color: var(--mantine-color-success-6);--mantine-color-success-outline: var(--mantine-color-success-6);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-filled);--mantine-color-purple-filled: var(--mantine-color-purple-6);--mantine-color-purple-filled-hover: var(--mantine-color-purple-7);--mantine-color-purple-light: #f2ebf3;--mantine-color-purple-light-hover: #dabfe9;--mantine-color-purple-light-color: var(--mantine-color-purple-6);--mantine-color-purple-outline: var(--mantine-color-purple-6);--mantine-color-purple-outline-hover: rgba(69, 28, 92, 0.05);}
-  </style>
   <style
     data-mantine-styles="classes"
   >
     @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
   </style>
   <div
-    class="_root_69e643 mantine-PlasmaHeader-root m-4081bf90 mantine-Group-root"
+    class="_root_69e643 mantine-PlasmaHeader-root m_4081bf90 mantine-Group-root"
     data-variant="primary"
     style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap;"
   >
     <div
-      class="m-6d731127 mantine-Stack-root"
+      class="m_6d731127 mantine-Stack-root"
       style="--stack-gap: 0rem; --stack-align: stretch; --stack-justify: flex-start;"
     >
       <div
-        class="m-8b3717df mantine-Breadcrumbs-root"
+        class="m_8b3717df mantine-Breadcrumbs-root"
       >
         <a
-          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
           color="action.6"
           data-underline="hover"
           style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
@@ -33,12 +28,12 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
           One
         </a>
         <div
-          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m_3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
           color="action.6"
           data-underline="hover"
           style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
@@ -46,12 +41,12 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
           Two
         </a>
         <div
-          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m_3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          class="mantine-focus-auto _root_a623ec m_849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root"
           color="action.6"
           data-underline="hover"
           style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
@@ -60,7 +55,7 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         </a>
       </div>
       <h1
-        class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m-8a5d1357 mantine-Title-root"
+        class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m_8a5d1357 mantine-Title-root"
         data-order="1"
         data-variant="primary"
         style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
@@ -68,7 +63,7 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         Title
       </h1>
       <p
-        class="mantine-focus-auto _description_69e643 mantine-PlasmaHeader-description m-b6d8b162 mantine-Text-root"
+        class="mantine-focus-auto _description_69e643 mantine-PlasmaHeader-description m_b6d8b162 mantine-Text-root"
         data-size="md"
         style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md);"
       />

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

@@ -1,11 +1,20 @@
-import {Factory, StylesApiProps, useProps} from '@mantine/core';
-import {MantineComponent} from '@mantine/core/lib/core/factory/factory';
+import {Factory, MantineComponent, StylesApiProps, useProps} from '@mantine/core';
 import {Children, ReactElement, ReactNode, useState} from 'react';
 import {InlineConfirmProvider} from './InlineConfirmContext';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
 import {InlineConfirmTarget} from './InlineConfirmTarget';
 
+/**
+ * Direct children of InlineConfirm that wraps an InlineConfirm.Prompt need this prop
+ */
+export interface InlineConfirmComponentsProps {
+    /**
+     * Unique id to map the prompt to the target
+     */
+    inlineConfirmId: string;
+}
+
 export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {
     /**
      * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids
@@ -30,10 +39,9 @@ export const InlineConfirm = ((_props) => {
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const prompt = convertedChildren.find(
-        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,
+        (child) => child.type !== InlineConfirmTarget && child.props?.inlineConfirmId === confirmingId,
     );
     const clearConfirm = () => setConfirmingId(null);
-
     return (
         <InlineConfirmProvider value={{confirmingId, setConfirmingId, clearConfirm}}>
             {prompt ?? children}

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

@@ -1,14 +1,11 @@
 import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';
 import {cloneElement, ReactElement, ReactNode, useEffect} from 'react';
+import {Button} from '../button/Button';
+import {InlineConfirmComponentsProps} from './InlineConfirm';
 
 import {useInlineConfirm} from './InlineConfirmContext';
-import {Button} from '../button/Button';
 
-interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'> {
-    /**
-     * Unique id to map the prompt to the target
-     */
-    id: string;
+interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineConfirmComponentsProps {
     /**
      * Label element
      *
@@ -52,7 +49,7 @@ const defaultProps: Partial<InlineConfirmPromptProps> = {
 };
 
 export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {
-    const {id, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
+    const {inlineConfirmId, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
         'InlineConfirmPrompt',
         defaultProps,
         props,
@@ -80,12 +77,12 @@ export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, r
     });
 
     useEffect(() => {
-        if (confirmingId !== id) {
+        if (confirmingId !== inlineConfirmId) {
             clearConfirm();
         }
     }, []);
 
-    if (confirmingId === id) {
+    if (confirmingId === inlineConfirmId) {
         return (
             <Group ref={ref} {...others}>
                 {label}

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

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

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

@@ -1,7 +1,7 @@
 import {Button, Menu} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
-import {InlineConfirm} from '../InlineConfirm';
+import {InlineConfirm, InlineConfirmComponentsProps} from '../InlineConfirm';
 
 describe('InlineConfirm', () => {
     it('renders its children', () => {
@@ -15,7 +15,7 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="delete" onClick={onClickSpy}>
+                <InlineConfirm.Target inlineConfirmId="delete" onClick={onClickSpy}>
                     Delete
                 </InlineConfirm.Target>
             </InlineConfirm>,
@@ -36,7 +36,7 @@ describe('InlineConfirm', () => {
                         <button>open menu</button>
                     </Menu.Target>
                     <Menu.Dropdown>
-                        <InlineConfirm.Target component={Menu.Item} id="delete" onClick={onClickSpy}>
+                        <InlineConfirm.Target component={Menu.Item} inlineConfirmId="delete" onClick={onClickSpy}>
                             Delete
                         </InlineConfirm.Target>
                     </Menu.Dropdown>
@@ -45,7 +45,7 @@ describe('InlineConfirm', () => {
         );
 
         await user.click(screen.getByRole('button', {name: /open menu/i}));
-        await user.click(screen.getByRole('menuitem', {name: /delete/i}));
+        await user.click(await screen.findByRole('menuitem', {name: /delete/i}));
 
         expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
@@ -54,8 +54,28 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
-                <InlineConfirm.Prompt id="my-button-id" />
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
+                <InlineConfirm.Prompt inlineConfirmId="my-button-id" />
+            </InlineConfirm>,
+        );
+        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Remove'})).toBeVisible();
+
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
+
+        expect(screen.getByText('Are you sure?')).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Remove'})).not.toBeInTheDocument();
+    });
+
+    it('replace the children with a prompt when clicking on a button which requires confirmation even if the prompt is nested', async () => {
+        const user = userEvent.setup();
+        const Fixture = ({inlineConfirmId}: InlineConfirmComponentsProps) => (
+            <InlineConfirm.Prompt inlineConfirmId={inlineConfirmId} />
+        );
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
+                <Fixture inlineConfirmId="my-button-id" />
             </InlineConfirm>,
         );
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
@@ -72,9 +92,9 @@ describe('InlineConfirm', () => {
         const confirmSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="my-button-id"
+                    inlineConfirmId="my-button-id"
                     label="Remove?"
                     confirm={<Button onClick={confirmSpy}>I confirm</Button>}
                     cancel={<Button>I changed my mind</Button>}
@@ -101,17 +121,17 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="remove">Remove</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="remove">Remove</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="remove"
+                    inlineConfirmId="remove"
                     label="Delete X?"
                     confirm={<Button>I confirm</Button>}
                     cancel={<Button>Cancel</Button>}
                 />
 
-                <InlineConfirm.Target id="print">Print</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="print">Print</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="print"
+                    inlineConfirmId="print"
                     label="Print?"
                     confirm={<Button>Yes</Button>}
                     cancel={<Button>No, save the trees</Button>}
@@ -135,7 +155,12 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="delete" onClick={onClickSpy} disabled disabledTooltip="You shall not pass">
+                <InlineConfirm.Target
+                    inlineConfirmId="delete"
+                    onClick={onClickSpy}
+                    disabled
+                    disabledTooltip="You shall not pass"
+                >
                     Delete
                 </InlineConfirm.Target>
             </InlineConfirm>,
@@ -147,6 +172,6 @@ describe('InlineConfirm', () => {
 
         await user.hover(deleteButton.parentElement);
 
-        expect(screen.getByRole('tooltip', {name: /You shall not pass/i})).toBeInTheDocument();
+        expect(await screen.findByRole('tooltip', {name: /You shall not pass/i})).toBeInTheDocument();
     });
 });

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

@@ -19,8 +19,14 @@
 }
 
 /* Table.Actions */
+.actionsDropdown {
+    text-align: left;
+}
 .actionsGroup {
-    display: inline-flex;
+    &:has(.actionsGroupItems:empty) {
+        /* Hide empty groups */
+        display: none;
+    }
 }
 
 /* Table.Filter */
@@ -37,6 +43,7 @@
     background-color: var(--mantine-color-gray-1);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
+    min-height: 69px;
 }
 
 .headerGridInner {