@coveord/plasma-mantine 51.2.0 → 52.0.0

package/src/components/collection/Collection.tsx

@@ -12,8 +12,8 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {ReorderPayload} from '@mantine/form/lib/types';
-import {useDidUpdate, useId} from '@mantine/hooks';
-import {ReactNode} from 'react';
+import {useDidUpdate} from '@mantine/hooks';
+import {ReactNode, useId} from 'react';
 import {DragDropContext, Droppable} from 'react-beautiful-dnd';
 
 import {Button} from '../button';
@@ -40,6 +40,16 @@ interface CollectionProps<T>
      * @default []
      */
     value?: T[];
+    /**
+     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
+     *
+     * This method is required when using this component with ReactHookForm.
+     *
+     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
+     *
+     * @param originalItem The original item
+     */
+    getItemId?: (originalItem: T) => string;
     /**
      * Unused, has no effect
      */
@@ -146,6 +156,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         descriptionProps,
         error,
         errorProps,
+        getItemId,
 
         // Style props
         classNames,
@@ -156,7 +167,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         ...others
     } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);
     const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});
-    const collectionID = useId('dnd-droppable');
+    const collectionID = useId();
 
     const hasOnlyOneItem = value.length === 1;
 
@@ -188,7 +199,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
 
     const items = value.map((item, index) => (
         <CollectionItem
-            key={index}
+            key={(getItemId?.(item) ?? index) as string}
             disabled={disabled}
             draggable={draggable}
             index={index}

package/src/components/collection/CollectionItem.tsx

@@ -62,7 +62,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
     const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
 
     return (
-        <Draggable index={index} draggableId={index.toString()}>
+        <Draggable key={index} index={index} draggableId={index.toString()}>
             {(provided, {isDragging}) => (
                 <Group
                     ref={provided.innerRef}

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';
+import {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';
+
+export interface CopyToClipboardProps {
+    /**
+     * The value to be copied to the clipboard.
+     */
+    value: string;
+    /**
+     * Whether to display the string to be copied alongside the button.
+     *
+     * @default false
+     */
+    withLabel?: boolean;
+}
+
+const useStyles = createStyles((theme) => ({
+    input: {
+        color: theme.colors.gray[7],
+    },
+}));
+
+const CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (
+    <CopyButton value={value} timeout={2000}>
+        {({copied, copy}) => (
+            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="top">
+                <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
+                    {copied ? <CheckSize24Px /> : <CopySize24Px />}
+                </ActionIcon>
+            </Tooltip>
+        )}
+    </CopyButton>
+);
+
+export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {
+    const {classes} = useStyles();
+
+    return withLabel ? (
+        <TextInput
+            classNames={{
+                input: classes.input,
+            }}
+            value={value}
+            readOnly
+            rightSection={<CopyToClipboardButton value={value} />}
+        />
+    ) : (
+        <CopyToClipboardButton value={value} />
+    );
+};

package/src/components/copyToClipboard/__tests__/CopyToClipboard.spec.tsx

@@ -0,0 +1,25 @@
+import {render, screen} from '@test-utils';
+
+import {CopyToClipboard} from '../CopyToClipboard';
+
+describe('CopyToClipboard', () => {
+    it('should display only a button by default', () => {
+        const testValue = 'text value';
+        render(<CopyToClipboard value={testValue} />);
+
+        expect(screen.getByRole('button', {name: /copy/i})).toBeVisible();
+        expect(screen.queryByDisplayValue(testValue)).not.toBeInTheDocument();
+        expect(document.querySelector('input')).not.toBeInTheDocument();
+    });
+
+    describe('when "isLabel" is true', () => {
+        it('should display an input element', () => {
+            const testValue = 'text value';
+            render(<CopyToClipboard value={testValue} withLabel />);
+
+            expect(screen.getByDisplayValue(testValue)).toBeVisible();
+            expect(screen.getByRole('button', {name: /copy/i})).toBeVisible();
+            expect(document.querySelector('input')).toBeInTheDocument();
+        });
+    });
+});

package/src/components/copyToClipboard/index.ts

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

package/src/components/index.ts

@@ -10,3 +10,4 @@ export * from './prompt';
 export * from './modal-wizard';
 export * from './button';
 export * from './menu';
+export * from './copyToClipboard';

package/src/components/modal-wizard/ModalWizard.tsx

@@ -54,12 +54,12 @@ export interface ModalWizardProps
     /**
      * A callback function that is executed when the user clicks on the next button
      */
-    onNext?: () => unknown;
+    onNext?: (newStep: number) => unknown;
 
     /**
      * A callback function that is executed when the user clicks on the previous button
      */
-    onPrevious?: () => unknown;
+    onPrevious?: (newStep: number) => unknown;
 
     /**
      * A function that is executed when user completes all the steps.
@@ -210,7 +210,7 @@ export const ModalWizard: ModalWizardType = ({
                             if (isFirstStep) {
                                 handleClose(true);
                             } else {
-                                onPrevious?.();
+                                onPrevious?.(currentStepIndex - 1);
                                 setCurrentStepIndex(currentStepIndex - 1);
                             }
                         }}
@@ -224,7 +224,7 @@ export const ModalWizard: ModalWizardType = ({
                             if (isLastStep) {
                                 onFinish?.() ?? handleClose(false);
                             } else {
-                                onNext?.();
+                                onNext?.(currentStepIndex + 1);
                                 setCurrentStepIndex(currentStepIndex + 1);
                             }
                         }}

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -34,6 +34,8 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => false;
+        const onNextSpy = vi.fn();
+        const onPreviousSpy = vi.fn();
 
         render(
             <ModalWizard
@@ -41,6 +43,8 @@ describe('ModalWizard', () => {
                 handleDirtyState={() => confirm('Are you sure you want to close?')}
                 opened={true}
                 onClose={undefined}
+                onNext={onNextSpy}
+                onPrevious={onPreviousSpy}
             >
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
@@ -75,6 +79,8 @@ describe('ModalWizard', () => {
 
         await user.click(nextButton);
 
+        expect(onNextSpy).toHaveBeenCalledWith(1);
+
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,
@@ -102,6 +108,8 @@ describe('ModalWizard', () => {
 
         await user.click(nextButton);
 
+        expect(onNextSpy).toHaveBeenCalledWith(2);
+
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 3/i,
@@ -135,6 +143,8 @@ describe('ModalWizard', () => {
             })
         );
 
+        expect(onNextSpy).toHaveBeenCalledWith(1);
+
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,

package/src/components/table/Table.tsx

@@ -26,6 +26,7 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableConsumer} from './TableConsumer';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
@@ -55,6 +56,7 @@ export const Table: TableType = <T,>({
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
+    const consumer = convertedChildren.find((child) => child.type === TableConsumer);
 
     const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
     const form = useForm<TableFormType>({
@@ -189,6 +191,7 @@ export const Table: TableType = <T,>({
                     getPageCount: table.getPageCount,
                 }}
             >
+                {consumer}
                 {!rows.length && !isFiltered && !loading ? (
                     noDataChildren
                 ) : (
@@ -235,3 +238,4 @@ Table.Predicate = TablePredicate;
 Table.CollapsibleColumn = TableCollapsibleColumn;
 Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;
+Table.Consumer = TableConsumer;

package/src/components/table/Table.types.ts

@@ -7,8 +7,8 @@ import {
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
-import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 
+import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
 import {TableDateRangePicker} from './TableDateRangePicker';
@@ -18,6 +18,7 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableConsumer} from './TableConsumer';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -206,4 +207,5 @@ export interface TableType {
     DateRangePicker: typeof TableDateRangePicker;
     CollapsibleColumn: typeof TableCollapsibleColumn;
     AccordionColumn: typeof TableAccordionColumn;
+    Consumer: typeof TableConsumer;
 }

package/src/components/table/TableConsumer.tsx

@@ -0,0 +1,3 @@
+import type {FunctionComponent, ReactNode} from 'react';
+
+export const TableConsumer: FunctionComponent<{children: ReactNode}> = ({children}) => <>{children}</>;

package/src/components/table/__tests__/Table.spec.tsx

@@ -137,6 +137,31 @@ describe('Table', () => {
         expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
     });
 
+    it('updates the table when a component in Table.Consumer triggers a change', async () => {
+        const user = userEvent.setup();
+        const spy = vi.fn();
+        const Fixture = () => {
+            const {onChange} = useTable();
+            return <button onClick={() => onChange()}>Click me</button>;
+        };
+        render(
+            <Table onChange={spy} data={[{id: '🆔', firstName: 'first', lastName: 'last'}]} columns={columns}>
+                <Table.Consumer>
+                    <Fixture />
+                </Table.Consumer>
+            </Table>
+        );
+
+        expect(screen.getByRole('button', {name: 'Click me'})).toBeVisible();
+        expect(spy).not.toHaveBeenCalled();
+
+        await user.click(screen.getByRole('button', {name: 'Click me'}));
+
+        await waitFor(() => {
+            expect(spy).toHaveBeenCalledTimes(1);
+        });
+    });
+
     describe('shows a loading animation', () => {
         const doRender = (props: Omit<TableProps<RowData>, 'columns'>) => {
             const NoData = () => {

package/src/index.ts

@@ -24,6 +24,8 @@ export {
     type ButtonProps,
     Menu,
     type MenuItemProps,
+    CopyToClipboard,
+    type CopyToClipboardProps,
 } from './components';
 export {useForm, createFormContext} from './form';