@coveord/plasma-mantine 47.4.0

package/dist/esm/theme/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    '&': {fontWeight: 400},\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n            styles: (theme) => ({\n                description: {\n                    fontSize: 'inherit',\n                    paddingBottom: theme.spacing.xs,\n                },\n            }),\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'center',\n                },\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n    },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","TextInput","radius","description","paddingBottom","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","labelWrapper","display","alignItems","List","listStyleType","Radio"],"mappings":"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"}

package/dist/esm/theme/index.js

@@ -0,0 +1,3 @@
+export * from "./Plasmantine";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/theme/index.ts"],"sourcesContent":["export * from './Plasmantine';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    setupFiles: ['<rootDir>/src/__tests__/Setup.ts'],
+    setupFilesAfterEnv: ['<rootDir>/src/__tests__/SetupAfterEnv.ts'],
+    globalSetup: '<rootDir>/src/__tests__/GlobalSetup.ts',
+    moduleNameMapper: {
+        '^@test-utils$': '<rootDir>/src/__tests__/Utils.tsx',
+        '^monaco-editor$': 'identity-obj-proxy',
+    },
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(t|j)sx?$': [
+            '@swc/jest',
+            {
+                jsc: {
+                    transform: {
+                        react: {
+                            runtime: 'automatic',
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
+    modulePathIgnorePatterns: ['<rootDir>/dist/'],
+};

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@coveord/plasma-mantine",
+  "version": "47.4.0",
+  "description": "A Plasma flavoured Mantine theme",
+  "keywords": [
+    "plasma",
+    "mantine",
+    "components",
+    "coveo"
+  ],
+  "license": "Apache-2.0",
+  "author": "Coveo",
+  "exports": {
+    ".": {
+      "types": "./dist/definitions/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "./dist/definitions/index.d.ts",
+  "dependencies": {
+    "@coveord/plasma-react-icons": "47.3.7",
+    "@coveord/plasma-tokens": "47.3.7",
+    "@monaco-editor/react": "4.4.5",
+    "@swc/helpers": "0.4.11",
+    "@tanstack/react-table": "8.5.11",
+    "@tanstack/table-core": "8.5.11",
+    "dayjs": "1.11.3",
+    "lodash.defaultsdeep": "4.6.1",
+    "monaco-editor": "0.34.0",
+    "react-beautiful-dnd": "13.1.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.10.0",
+    "@mantine/core": "5.6.2",
+    "@mantine/dates": "5.6.2",
+    "@mantine/form": "5.6.2",
+    "@mantine/hooks": "5.6.2",
+    "@mantine/modals": "5.6.2",
+    "@swc/cli": "0.1.57",
+    "@swc/core": "1.3.3",
+    "@swc/jest": "0.2.22",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/user-event": "12.8.3",
+    "@types/jest": "27.5.2",
+    "@types/lodash.defaultsdeep": "4.6.7",
+    "@types/react": "17.0.44",
+    "@types/react-beautiful-dnd": "13.1.2",
+    "@types/react-dom": "17.0.15",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "eslint-plugin-jest": "26.1.5",
+    "eslint-plugin-testing-library": "5.5.1",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "28.1.2",
+    "jest-environment-jsdom": "28.1.2",
+    "jest-junit": "13.2.0",
+    "npm-run-all": "4.1.5",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rimraf": "3.0.2",
+    "tslib": "2.3.1",
+    "typescript": "4.6.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.10.0",
+    "@mantine/core": "^5.6.2",
+    "@mantine/dates": "^5.6.2",
+    "@mantine/form": "^5.6.2",
+    "@mantine/hooks": "^5.6.2",
+    "@mantine/modals": "^5.6.2",
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build",
+    "clean": "rimraf dist",
+    "start": "node ../../scripts/start",
+    "test": "jest --maxWorkers=65%"
+  }
+}

package/src/__tests__/GlobalSetup.ts

@@ -0,0 +1,5 @@
+// This file is executed once, before everything else.
+export default () => {
+    // @ts-ignore
+    process.env.TZ = 'UTC';
+};

package/src/__tests__/Setup.ts

@@ -0,0 +1,4 @@
+/**
+ * This file is executed once per test file.
+ * It is executed before executing SetupAfterEnv and before the test code itself.
+ */

package/src/__tests__/SetupAfterEnv.ts

@@ -0,0 +1,16 @@
+/**
+ * This file is executed once per test file.
+ * It is executed after executing Setup and Jest is initialised, but before the test code itself.
+ */
+
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+
+Element.prototype.scrollTo = jest.fn();
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+    }));

package/src/__tests__/Utils.tsx

@@ -0,0 +1,15 @@
+import {render, RenderOptions, RenderResult} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {FunctionComponent, ReactElement} from 'react';
+
+import {Plasmantine} from '../theme';
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
+    const TestWrapper: FunctionComponent = ({children}) => <Plasmantine>{children}</Plasmantine>;
+
+    return render(ui, {wrapper: TestWrapper, ...options});
+};
+
+export {userEvent};
+export * from '@testing-library/react';
+export {customRender as render};

package/src/components/blank-slate/BlankSlate.tsx

@@ -0,0 +1,17 @@
+import {Paper, Stack} from '@mantine/core';
+import {FunctionComponent} from 'react';
+
+interface BlankSlateProps {
+    /**
+     * Whether the Blankslate render with a border
+     *
+     * @default true
+     */
+    withBorder?: boolean;
+}
+
+export const BlankSlate: FunctionComponent<BlankSlateProps> = ({children, withBorder = true}) => (
+    <Paper shadow={withBorder && 'xs'} p="xl" withBorder={withBorder}>
+        <Stack align="center">{children}</Stack>
+    </Paper>
+);

package/src/components/blank-slate/__tests__/BlankSlate.spec.tsx

@@ -0,0 +1,11 @@
+import {render, screen} from '@test-utils';
+
+import {BlankSlate} from '../BlankSlate';
+
+describe('BlankSlate', () => {
+    it('renders the children', () => {
+        render(<BlankSlate>content</BlankSlate>);
+
+        expect(screen.getByText('content')).toBeInTheDocument();
+    });
+});

package/src/components/blank-slate/index.ts

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

package/src/components/code-editor/CodeEditor.example.tsx

@@ -0,0 +1,32 @@
+import {useForm} from '@mantine/form';
+import {CodeEditor} from './CodeEditor';
+
+export default () => {
+    const form = useForm({
+        initialValues: {
+            config: '{"key":"value"}',
+        },
+        validate: {
+            config: (jsonValue) => {
+                try {
+                    const config = JSON.parse(jsonValue);
+                    if (!config.key) {
+                        return 'The key must have a value';
+                    }
+                } catch {
+                    return 'Invalid JSON';
+                }
+                return null;
+            },
+        },
+    });
+
+    return (
+        <CodeEditor
+            language="json"
+            label="Configuration"
+            description="This JSON configuration is very important"
+            {...form.getInputProps('config')}
+        />
+    );
+};

package/src/components/code-editor/CodeEditor.tsx

@@ -0,0 +1,187 @@
+import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
+import {
+    ActionIcon,
+    Box,
+    CopyButton,
+    createStyles,
+    DefaultProps,
+    Group,
+    Input,
+    InputWrapperBaseProps,
+    Selectors,
+    Stack,
+    Tooltip,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {useUncontrolled} from '@mantine/hooks';
+import Editor, {loader} from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import {FunctionComponent} from 'react';
+
+import {useParentHeight} from '../../hooks';
+
+loader.config({monaco});
+
+const useStyles = createStyles((theme) => ({
+    root: {},
+    editor: {
+        border: `1px solid ${theme.colors.gray[2]}`,
+        borderRadius: theme.defaultRadius,
+        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
+        height: '100%',
+    },
+}));
+
+interface CodeEditorProps
+    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,
+        DefaultProps<Selectors<typeof useStyles>> {
+    /**
+     * The language syntax of the editor
+     *
+     * @default 'plaintext'
+     */
+    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    /** Default value for uncontrolled input */
+    defaultValue?: string;
+    /** Value for controlled input */
+    value?: string;
+    /** onChange value for controlled input */
+    onChange?(value: string): void;
+    /** Called whenever the code editor gets the focus */
+    onFocus?(): void;
+    /**
+     * The minimal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height is too short, it will use this value as minimum.
+     *
+     * @default 300
+     */
+    minHeight?: number;
+    /**
+     * The maximal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.
+     */
+    maxHeight?: number;
+    disabled?: boolean;
+}
+
+const defaultProps: Partial<CodeEditorProps> = {
+    language: 'plaintext',
+    defaultValue: '',
+    minHeight: 300,
+};
+
+export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
+    const {
+        language,
+        defaultValue,
+        onChange,
+        onFocus,
+        value,
+        label,
+        required,
+        labelProps,
+        error,
+        errorProps,
+        description,
+        descriptionProps,
+        minHeight,
+        maxHeight,
+        disabled,
+        ...others
+    } = useComponentDefaultProps('CodeEditor', defaultProps, props);
+    const {classes, theme} = useStyles();
+    const [_value, handleChange] = useUncontrolled<string>({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: '',
+    });
+    const [parentHeight, ref] = useParentHeight();
+
+    const _label = label ? (
+        <Input.Label required={required} {...labelProps}>
+            {label}
+        </Input.Label>
+    ) : null;
+
+    const _description = description ? (
+        <Input.Description mt="xs" {...descriptionProps}>
+            {description}
+        </Input.Description>
+    ) : null;
+
+    const _error = error ? (
+        <Input.Error mt="xs" {...errorProps}>
+            {error}
+        </Input.Error>
+    ) : null;
+
+    const _header =
+        _label || _description ? (
+            <Box>
+                {_label}
+                {_description}
+            </Box>
+        ) : null;
+
+    const _copyButton = (
+        <Group position="right">
+            <CopyButton value={_value} timeout={2000}>
+                {({copied, copy}) => (
+                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
+                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>
+                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
+                        </ActionIcon>
+                    </Tooltip>
+                )}
+            </CopyButton>
+        </Group>
+    );
+
+    const _editor = (
+        <Box p="md" pl="xs" className={classes.editor}>
+            <Editor
+                defaultLanguage={language}
+                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}
+                options={{
+                    minimap: {enabled: false},
+                    wordWrap: 'on',
+                    wrappingStrategy: 'advanced',
+                    scrollBeyondLastLine: false,
+                    formatOnPaste: true,
+                    fontSize: theme.fontSizes.xs,
+                    readOnly: disabled,
+                    tabSize: 2,
+                }}
+                value={_value}
+                onChange={handleChange}
+                onMount={(editor) => {
+                    editor.onDidFocusEditorText(onFocus);
+                    editor.onDidBlurEditorText(async () => {
+                        await editor.getAction('editor.action.formatDocument').run();
+                    });
+                }}
+            />
+        </Box>
+    );
+
+    return (
+        <Stack
+            justify="flex-start"
+            className={classes.root}
+            spacing={0}
+            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}
+            ref={ref}
+            {...others}
+        >
+            {_header}
+            {_copyButton}
+            {_editor}
+            {_error}
+        </Stack>
+    );
+};

package/src/components/code-editor/__mocks__/@monaco-editor/react.tsx

@@ -0,0 +1,10 @@
+import {type EditorProps} from '@monaco-editor/react';
+import {FunctionComponent} from 'react';
+
+const MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid="monaco-editor" />;
+
+export default MockedEditor;
+
+export const loader = {
+    config: jest.fn(),
+};

package/src/components/code-editor/__tests__/CodeEditor.spec.tsx

@@ -0,0 +1,37 @@
+import {useForm} from '@mantine/form';
+import {render, screen, within} from '@test-utils';
+
+import {CodeEditor} from '../CodeEditor';
+
+jest.mock('monaco-editor');
+jest.mock('@monaco-editor/react');
+
+describe('CodeEditor', () => {
+    it('renders the monaco editor and a copy to clipboard button', async () => {
+        render(<CodeEditor label="label" description="description" />);
+
+        expect(screen.getByText(/label/)).toBeInTheDocument();
+        expect(screen.getByText(/description/)).toBeInTheDocument();
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: /copy/i})).toBeInTheDocument();
+    });
+
+    it('shows validation errors underneath the code editor', () => {
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {
+                    myJsonCode: '{}',
+                },
+                initialErrors: {
+                    myJsonCode: 'Invalid configuration',
+                },
+            });
+            return <CodeEditor {...form.getInputProps('myJsonCode')} />;
+        };
+        render(<Fixture />);
+
+        const errors = screen.getByRole('alert');
+
+        expect(within(errors).getByText(/invalid configuration/i)).toBeInTheDocument();
+    });
+});

package/src/components/code-editor/index.ts

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

package/src/components/collection/Collection.example.tsx

@@ -0,0 +1,37 @@
+import {Checkbox, TextInput} from '@mantine/core';
+import {useForm} from '@mantine/form';
+
+import {Collection} from './Collection';
+
+export default () => {
+    const form = useForm({
+        initialValues: {
+            todoList: [
+                {name: 'wash the dishes', done: true},
+                {name: 'take out the trash', done: false},
+                {name: 'vacuum the floors', done: true},
+            ],
+        },
+    });
+
+    return (
+        <Collection<{name: string; done: boolean}>
+            draggable
+            addLabel="Add task"
+            newItem={{name: '', done: false}}
+            {...form.getInputProps('todoList')}
+        >
+            {(task, index) => (
+                <>
+                    <TextInput
+                        autoFocus
+                        placeholder="Do something ..."
+                        {...form.getInputProps(`todoList.${index}.name`)}
+                        styles={{flex: 1}}
+                    />
+                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
+                </>
+            )}
+        </Collection>
+    );
+};

package/src/components/collection/Collection.tsx

@@ -0,0 +1,128 @@
+import {AddSize16Px} from '@coveord/plasma-react-icons';
+import {
+    Box,
+    Button,
+    DefaultProps,
+    Group,
+    MantineNumberSize,
+    Selectors,
+    Stack,
+    Tooltip,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {useId} from '@mantine/hooks';
+import {ReactNode} from 'react';
+import {DragDropContext, Droppable} from 'react-beautiful-dnd';
+
+import {useControlledList} from '../../hooks';
+import {CollectionItem} from './CollectionItem';
+import useStyles from './Colllection.styles';
+
+interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+    newItem: T;
+    children: (item: T, index: number) => ReactNode;
+    defaultValue?: T[];
+    value?: T[];
+    onFocus?: () => void;
+    onChange?: (value: T[]) => void;
+    draggable?: boolean;
+    disabled?: boolean;
+    addLabel?: string;
+    addDisabledTooltip?: string;
+    spacing?: MantineNumberSize;
+    required?: boolean;
+}
+
+const defaultProps: Partial<CollectionProps<unknown>> = {
+    draggable: false,
+    addLabel: 'Add item',
+    addDisabledTooltip: 'There is already an empty item',
+    disabled: false,
+    spacing: 'xs',
+    required: false,
+};
+
+export const Collection = <T,>(props: CollectionProps<T>) => {
+    const {
+        value,
+        defaultValue,
+        onChange,
+        onFocus,
+        disabled,
+        draggable,
+        children,
+        spacing,
+        required,
+        newItem,
+        addLabel,
+        addDisabledTooltip,
+
+        // Style props
+        classNames,
+        className,
+        styles,
+        unstyled,
+
+        ...others
+    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);
+    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});
+    const collectionID = useId('dnd-droppable');
+
+    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});
+    const hasOnlyOneItem = values.length === 1;
+    const items = values.map((item, index) => (
+        <CollectionItem
+            key={index}
+            disabled={disabled}
+            draggable={draggable}
+            index={index}
+            onRemove={() => remove(index)}
+            styles={styles}
+            removable={!(required && hasOnlyOneItem)}
+        >
+            {children(item, index)}
+        </CollectionItem>
+    ));
+
+    const hasEmptyItem = values.some((item) => JSON.stringify(item) === JSON.stringify(newItem));
+
+    const _addButton = disabled ? null : (
+        <Group>
+            <Tooltip label={addDisabledTooltip} disabled={!hasEmptyItem}>
+                <Box>
+                    <Button
+                        variant="subtle"
+                        leftIcon={<AddSize16Px height={16} />}
+                        onClick={() => append(newItem)}
+                        disabled={hasEmptyItem}
+                    >
+                        {addLabel}
+                    </Button>
+                </Box>
+            </Tooltip>
+        </Group>
+    );
+
+    return (
+        <DragDropContext
+            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}
+        >
+            <Droppable direction="vertical" droppableId={collectionID}>
+                {(provided) => (
+                    <Box
+                        {...provided.droppableProps}
+                        ref={provided.innerRef}
+                        className={cx(classes.root, className)}
+                        {...others}
+                    >
+                        <Stack spacing={spacing}>
+                            {items}
+                            {provided.placeholder}
+                            {_addButton}
+                        </Stack>
+                    </Box>
+                )}
+            </Droppable>
+        </DragDropContext>
+    );
+};