@coveord/plasma-mantine 55.7.2-next.21 → 55.7.2-next.23

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -13,21 +13,48 @@ describe('Collection', () => {
             });
             return (
                 <Collection<string> newItem="" {...form.getInputProps('fruits')}>
-                    {(name) => <span data-testid="item">{name}</span>}
+                    {(name) => <span>{name}</span>}
                 </Collection>
             );
         };
 
         render(<Fixture />);
 
-        const items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(2);
+        expect(screen.queryByTestId('item-0')).toHaveTextContent('banana');
+        expect(screen.queryByTestId('item-1')).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-0')).toBeInTheDocument();
+        expect(screen.getByTestId('item-1')).toBeInTheDocument();
+    });
+
+    it('renders one item for each initial values in the form with custom id', () => {
+        const getItemId = (item: string) => `id-${item}`;
+
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <Collection<string> getItemId={getItemId} newItem="" {...form.getInputProps('fruits')}>
+                    {(name) => <span>{name}</span>}
+                </Collection>
+            );
+        };
+
+        render(<Fixture />);
+
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
         expect(items[0]).toHaveTextContent('banana');
         expect(items[1]).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-id-orange')).toBeInTheDocument();
+        expect(screen.getByTestId('item-id-banana')).toBeInTheDocument();
     });
 
     it('removes the item when clicking on its remove button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm({
                 initialValues: {fruits: ['banana', 'orange']},
@@ -36,7 +63,7 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="" {...form.getInputProps('fruits')}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -44,21 +71,57 @@ describe('Collection', () => {
         };
 
         render(<Fixture />);
-        let items = screen.getAllByTestId('item');
+        let items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
 
-        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+        const removeBanana = await within(screen.getByTestId('item-0')).findByRole('button', {name: /remove/i});
+        await user.click(removeBanana);
 
+        items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(1);
+        expect(items[0]).toHaveTextContent('orange');
+        expect(screen.queryByTestId('item-1')).not.toBeInTheDocument();
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
+    });
+
+    it('removes the item when clicking on its remove button with custom id', async () => {
+        const user = userEvent.setup();
+        const getItemId = (item: string) => `id-${item}`;
+
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <>
+                    <Collection getItemId={getItemId} newItem="" {...form.getInputProps('fruits')}>
+                        {(name) => <span>{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        let items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(2);
+
+        const removeBanana = await within(screen.queryByTestId('item-id-banana')).findByRole('button', {
+            name: /remove/i,
+        });
         await user.click(removeBanana);
 
-        items = screen.getAllByTestId('item');
-        expect(screen.getAllByTestId('item')).toHaveLength(1);
+        items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(1);
         expect(items[0]).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-id-orange')).toBeInTheDocument();
+        expect(screen.queryByTestId('item-id-banana')).not.toBeInTheDocument();
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
     });
 
     it('calls the onRemoveItem function when clicking on a remove button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const onRemoveItemSpy = vi.fn();
         const Fixture = () => {
             const form = useForm({
@@ -67,29 +130,27 @@ describe('Collection', () => {
             });
             return (
                 <Collection newItem="" {...form.getInputProps('fruits')} onRemoveItem={onRemoveItemSpy}>
-                    {(name) => <span data-testid="item">{name}</span>}
+                    {(name) => <span>{name}</span>}
                 </Collection>
             );
         };
 
         render(<Fixture />);
-        let items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
-
-        const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
+        const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {name: /remove/i});
         await user.click(removeOrange);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(1);
 
-        items = screen.getAllByTestId('item');
-        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+        const removeBanana = await within(screen.queryByTestId('item-0')).findByRole('button', {name: /remove/i});
         await user.click(removeBanana);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(0);
     });
 
     it('does not render the remove button when disabled', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const [disabled, setDisabled] = useState(false);
             const form = useForm({
@@ -100,7 +161,7 @@ describe('Collection', () => {
                 <>
                     <button onClick={() => setDisabled(true)}>disable</button>
                     <Collection newItem="" {...form.getInputProps('fruits')} disabled={disabled}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 </>
             );
@@ -113,7 +174,7 @@ describe('Collection', () => {
     });
 
     it('adds a new item when clicking on the add button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm({
                 initialValues: {fruits: ['banana', 'orange']},
@@ -122,7 +183,38 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="new" {...form.getInputProps('fruits')}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        const addItem = screen.getByRole('button', {name: /add/i});
+        await user.click(addItem);
+
+        const items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(3);
+        expect(items[0]).toHaveTextContent('banana');
+        expect(items[1]).toHaveTextContent('orange');
+        expect(items[2]).toHaveTextContent('new');
+        expect(screen.getByTestId('item-2')).toBeInTheDocument();
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
+    });
+
+    it('adds a new item when clicking on the add button with custom id', async () => {
+        const user = userEvent.setup();
+        const getItemId = (item: string) => `id-${item}`;
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <>
+                    <Collection getItemId={getItemId} newItem="new" {...form.getInputProps('fruits')}>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -133,11 +225,12 @@ describe('Collection', () => {
         const addItem = screen.getByRole('button', {name: /add/i});
         await user.click(addItem);
 
-        const items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(3);
         expect(items[0]).toHaveTextContent('banana');
         expect(items[1]).toHaveTextContent('orange');
         expect(items[2]).toHaveTextContent('new');
+        expect(screen.getByTestId('item-id-new')).toBeInTheDocument();
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
     });
 
@@ -151,7 +244,7 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -175,8 +268,8 @@ describe('Collection', () => {
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -185,7 +278,7 @@ describe('Collection', () => {
 
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(1);
             expect(items[0]).toHaveTextContent('banana');
         });
@@ -197,8 +290,8 @@ describe('Collection', () => {
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -209,22 +302,24 @@ describe('Collection', () => {
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(2);
             expect(items[0]).toHaveTextContent('banana');
             expect(items[1]).toHaveTextContent('orange');
+            expect(screen.getByTestId('item-0')).toBeInTheDocument();
+            expect(screen.getByTestId('item-1')).toBeInTheDocument();
         });
 
         it('not render the remove button after removing an item from a collection containing two items', async () => {
-            const user = userEvent.setup({delay: null});
+            const user = userEvent.setup();
             const Fixture = () => {
                 const form = useForm({
                     initialValues: {fruits: ['banana', 'orange']},
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -236,14 +331,18 @@ describe('Collection', () => {
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(2);
             expect(items[0]).toHaveTextContent('banana');
             expect(items[1]).toHaveTextContent('orange');
+            expect(screen.getByTestId('item-0')).toBeInTheDocument();
+            expect(screen.getByTestId('item-1')).toBeInTheDocument();
 
-            await user.click(removeButtons[1]);
+            const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {name: /remove/i});
+            await user.click(removeOrange);
 
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+            expect(screen.queryByTestId('item-1')).not.toBeInTheDocument();
         });
     });
 
@@ -257,7 +356,7 @@ describe('Collection', () => {
                 return (
                     <>
                         <Collection newItem="new" {...form.getInputProps('fruits')} draggable>
-                            {(name) => <span data-testid="item">{name}</span>}
+                            {(name) => <span>{name}</span>}
                         </Collection>
                     </>
                 );
@@ -271,21 +370,15 @@ describe('Collection', () => {
 
         describe('when required is true', () => {
             it('not render the remove button after removing an item from a collection containing two items', async () => {
-                const user = userEvent.setup({delay: null});
+                const user = userEvent.setup();
                 const Fixture = () => {
                     const form = useForm({
                         initialValues: {fruits: ['banana', 'orange']},
                         enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                     });
                     return (
-                        <Collection
-                            data-testid="collection"
-                            {...form.getInputProps('fruits')}
-                            newItem="new"
-                            required
-                            draggable
-                        >
-                            {(name) => <span data-testid="item">{name}</span>}
+                        <Collection {...form.getInputProps('fruits')} newItem="new" required draggable>
+                            {(name) => <span>{name}</span>}
                         </Collection>
                     );
                 };
@@ -297,12 +390,15 @@ describe('Collection', () => {
                 const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
                 expect(removeButtons).toHaveLength(2);
 
-                const items = screen.getAllByTestId('item');
+                const items = screen.getAllByTestId(/item-/);
                 expect(items).toHaveLength(2);
                 expect(items[0]).toHaveTextContent('banana');
                 expect(items[1]).toHaveTextContent('orange');
 
-                await user.click(removeButtons[1]);
+                const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {
+                    name: /remove/i,
+                });
+                await user.click(removeOrange);
 
                 expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
             });

package/src/components/index.ts

@@ -20,3 +20,5 @@ export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
 export * from './child-form';
+export * from './checkbox';
+export * from './loader';

package/src/components/loader/CircleLoader.module.css

@@ -0,0 +1,29 @@
+.root {
+    --loader-light-color: var(--mantine-primary-color-light);
+
+    display: inline-block;
+    width: var(--loader-size);
+    height: var(--loader-size);
+
+    &::after {
+        content: '';
+        display: block;
+        width: var(--loader-size);
+        height: var(--loader-size);
+        border-radius: 10000px;
+        border-width: calc(var(--loader-size) / 8);
+        border-style: solid;
+        border-color: var(--loader-light-color) var(--loader-light-color) var(--loader-light-color) var(--loader-color);
+        animation: circle-loader-animation 1.2s linear infinite;
+    }
+}
+
+@keyframes circle-loader-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/loader/CircleLoader.tsx

@@ -0,0 +1,8 @@
+import {Box, MantineLoaderComponent} from '@mantine/core';
+import cx from 'clsx';
+import {forwardRef} from 'react';
+import classes from './CircleLoader.module.css';
+
+export const CircleLoader: MantineLoaderComponent = forwardRef(({className, ...others}, ref) => (
+    <Box component="span" className={cx(classes.root, className)} {...others} ref={ref} />
+));

package/src/components/loader/index.ts

@@ -0,0 +1 @@
+export * from './CircleLoader';

package/src/components/read-only/ReadOnlyInputStyles.ts

@@ -2,8 +2,8 @@ import {type MantineTheme} from '@mantine/core';
 
 export const readOnlyInputStyles = (theme: MantineTheme) => ({
     wrapper: {
-        '--input-bd': 'transparent',
-        '--input-bg': theme.colors.gray[2],
+        '--input-bd': 'var(--mantine-color-default-border)',
+        '--input-bg': theme.colors.gray[1],
         '--input-color': theme.colors.gray[7],
         '--input-placeholder-color': theme.colors.gray[7],
     },

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -35,7 +35,7 @@
 
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
-            background-color: var(--mantine-color-gray-light);
+            background-color: var(--mantine-color-gray-light-hover);
         }
 
         &[data-multi-selection='true'] {

package/src/styles/Badge.module.css

@@ -1,3 +1,5 @@
 .root {
+    --badge-fz-md: 12px;
+
     font-weight: 500;
 }

package/src/styles/Checkbox.module.css

@@ -1,9 +1,45 @@
-.label {
-    font-weight: 400;
+/* 
+`readonly` state on checkboxes is not something that exists in Mantine.
+So we are allowing ourselves some custom style to achieve the desired effect
+*/
+.input {
+    @mixin light {
+        /* targets the default checkbox without overiding mantine's base rules */
+        &:not([data-indeterminate], :checked, [readonly], :disabled, [data-error='true']) {
+            border-color: var(--coveo-color-input-border);
+        }
+
+        /* mantine doesn't have a concept of readonly checkbox */
+        &[readonly] {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-readonly);
+            color: var(--coveo-color-text-readonly);
+
+            & + .icon {
+                color: var(--coveo-color-text-readonly);
+            }
+        }
+
+        /* mantine hardcodes disabled styles so we need to write custom styles */
+        &:disabled {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-disabled);
+            color: var(--coveo-color-text-disabled);
+
+            & + .icon {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
+    }
 }
 
-.input {
-    @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+.labelWrapper {
+    @mixin light {
+        &[data-disabled] {
+            .label,
+            .description {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
     }
 }

package/src/styles/CheckboxIndicator.module.css

@@ -1,5 +1,12 @@
+/* 
+`readonly` state on checkboxes is not something that exists in Mantine.
+So we are allowing ourselves some custom style to achieve the desired effect
+*/
 .indicator {
     @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+        &[readonly] {
+            border-color: var(--coveo-color-input-border);
+            background-color: var(--checkbox-color);
+        }
     }
 }

package/src/styles/Input.module.css

@@ -10,10 +10,16 @@
     }
 
     &[data-disabled] {
-        --input-section-color: var(--input-disabled-color);
+        > .section {
+            > svg {
+                color: var(--input-disabled-color);
+            }
+        }
     }
 }
 
 .section {
-    color: var(--input-section-color);
+    > svg {
+        color: var(--mantine-color-gray-3);
+    }
 }

package/src/styles/Pagination.module.css

@@ -1,5 +1,14 @@
+.root {
+    --pagination-active-bg: var(--mantine-primary-color-light);
+    --pagination-active-color: var(--mantine-primary-color-filled);
+}
+
 .control {
     @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+        border-color: var(--mantine-color-default-border);
+    }
+
+    &[data-active] {
+        border: none;
     }
 }

package/src/styles/Radio.module.css

@@ -1,10 +1,38 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+
+    @mixin light {
+        color: var(--coveo-color-title);
+
+        &[data-disabled] {
+            .label,
+            .description {
+                color: var(--coveo-color-text-disabled);
+            }
+        }
+    }
 }
 
 .radio {
-    @mixin where-light {
-        border-color: var(--coveo-color-input-border);
+    @mixin light {
+        &:not([data-disabled]) {
+            border-color: var(--coveo-color-input-border);
+        }
+
+        &:disabled {
+            background-color: var(--coveo-color-bg-disabled);
+        }
+
+        /* mantine hardcodes disabled styles so we need to write custom styles */
+        &[readonly] {
+            border-color: var(--mantine-color-default-border);
+            background-color: var(--coveo-color-bg-readonly);
+            color: var(--coveo-color-text-readonly);
+
+            & + .icon {
+                color: var(--coveo-color-text-readonly);
+            }
+        }
     }
 }

package/src/styles/ReadOnlyInput.module.css

@@ -1,12 +1,16 @@
 .input {
     cursor: text;
 
-    --input-bd: transparent;
-    --input-bg: var(--mantine-color-dark-light);
+    --input-bd: var(--mantine-color-default-border);
+    --input-bg: var(--mantine-color-gray-1);
     --input-color: var(--mantine-color-text);
-    --input-placeholder-color: var(--mantine-color-text);
+    --input-placeholder-color: var(--mantine-color-placeholder);
 }
 
 .section {
     --input-section-color: var(--mantine-color-text);
+
+    > svg {
+        color: var(--mantine-color-gray-3);
+    }
 }

package/src/styles/Select.module.css

@@ -0,0 +1,46 @@
+.option {
+    @mixin light {
+        color: var(--coveo-color-title);
+        border-radius: var(--mantine-radius-sm);
+
+        @mixin hover {
+            &:not([data-combobox-disabled], [data-checked], [data-combobox-selected]) {
+                background-color: var(--mantine-color-default-hover);
+            }
+        }
+
+        &[data-combobox-disabled] {
+            opacity: 1;
+            color: var(--coveo-color-text-disabled);
+        }
+
+        &[data-combobox-active='true'] {
+            background-color: var(--mantine-primary-color-light);
+            color: var(--mantine-primary-color-filled);
+
+            + svg {
+                opacity: 1;
+            }
+        }
+
+        &[data-combobox-selected] {
+            background-color: var(--mantine-primary-color-filled);
+            color: white;
+        }
+    }
+}
+
+.groupLabel {
+    @mixin light {
+        color: var(--mantine-color-placeholder);
+    }
+}
+
+.input {
+    @mixin light {
+        &[data-disabled] {
+            --input-disabled-bg: var(--coveo-color-bg-disabled);
+            --input-bd: var(--mantine-color-default-border);
+        }
+    }
+}