@coveord/plasma-mantine 47.4.0 → 47.6.0

package/dist/esm/components/collection/Collection.js

@@ -19,12 +19,11 @@ var defaultProps = {
     required: false
 };
 export var Collection = function(props) {
-    var _ref = useComponentDefaultProps("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, onFocus = _ref.onFocus, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, // Style props
+    var _ref = useComponentDefaultProps("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
     classNames = _ref.classNames, className = _ref.className, styles = _ref.styles, unstyled = _ref.unstyled, others = _object_without_properties(_ref, [
         "value",
         "defaultValue",
         "onChange",
-        "onFocus",
         "disabled",
         "draggable",
         "children",
@@ -33,6 +32,7 @@ export var Collection = function(props) {
         "newItem",
         "addLabel",
         "addDisabledTooltip",
+        "allowAdd",
         "classNames",
         "className",
         "styles",
@@ -64,13 +64,12 @@ export var Collection = function(props) {
             children: children(item, index)
         }, index);
     });
-    var hasEmptyItem = values.some(function(item) {
-        return JSON.stringify(item) === JSON.stringify(newItem);
-    });
+    var ref3;
+    var addAllowed = (ref3 = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && ref3 !== void 0 ? ref3 : true;
     var _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
         children: /*#__PURE__*/ _jsx(Tooltip, {
             label: addDisabledTooltip,
-            disabled: !hasEmptyItem,
+            disabled: addAllowed,
             children: /*#__PURE__*/ _jsx(Box, {
                 children: /*#__PURE__*/ _jsx(Button, {
                     variant: "subtle",
@@ -80,7 +79,7 @@ export var Collection = function(props) {
                     onClick: function() {
                         return append(newItem);
                     },
-                    disabled: hasEmptyItem,
+                    disabled: !addAllowed,
                     children: addLabel
                 })
             })

package/dist/esm/components/collection/Collection.js.map

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

package/dist/esm/components/modal-wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal-wizard/index.ts"],"sourcesContent":["export * from './ModalWizard';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"sources":["../../../../src/components/modal-wizard/index.ts"],"sourcesContent":["export * from './ModalWizard';\nexport {type ModalWizardStepProps} from './ModalWizardStep';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { ColumnDef, createColumnHelper } from "@tanstack/table-core";
+export { createColumnHelper } from "@tanstack/table-core";
 export * from "@mantine/core";
 export * from "@mantine/form";
 export * from "@mantine/hooks";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport {ColumnDef, createColumnHelper} from '@tanstack/table-core';\n\nexport * from '@mantine/core';\nexport * from '@mantine/form';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\n\nexport * from './components';\nexport * from './theme';\n\n// explicitly overriding mantine components\nexport {Header, Table} from './components';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["ColumnDef","createColumnHelper","Header","Table"],"mappings":"AAIA,SAAQA,SAAS,EAAEC,kBAAkB,QAAO,sBAAsB,CAAC;AAEnE,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,QAAO,cAAc,CAAC"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport {type ColumnDef, createColumnHelper} from '@tanstack/table-core';\n\nexport * from '@mantine/core';\nexport * from '@mantine/form';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\n\nexport * from './components';\nexport * from './theme';\n\n// explicitly overriding mantine components\nexport {Header, Table} from './components';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["createColumnHelper","Header","Table"],"mappings":"AAIA,SAAwBA,kBAAkB,QAAO,sBAAsB,CAAC;AAExE,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAE9B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,QAAO,cAAc,CAAC"}

package/jest.config.js

@@ -4,7 +4,6 @@ module.exports = {
     globalSetup: '<rootDir>/src/__tests__/GlobalSetup.ts',
     moduleNameMapper: {
         '^@test-utils$': '<rootDir>/src/__tests__/Utils.tsx',
-        '^monaco-editor$': 'identity-obj-proxy',
     },
     testEnvironment: 'jsdom',
     transform: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "47.4.0",
+  "version": "47.6.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -80,6 +80,7 @@
     "build": "node ../../scripts/build",
     "clean": "rimraf dist",
     "start": "node ../../scripts/start",
-    "test": "jest --maxWorkers=65%"
+    "test": "jest --maxWorkers=65%",
+    "test:watch": "jest --watchAll"
   }
 }

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

@@ -2,12 +2,14 @@ import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
 import {
     ActionIcon,
     Box,
+    Center,
     CopyButton,
     createStyles,
     DefaultProps,
     Group,
     Input,
     InputWrapperBaseProps,
+    Loader,
     Selectors,
     Stack,
     Tooltip,
@@ -15,13 +17,10 @@ import {
 } 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 {FunctionComponent, useEffect, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
 
-loader.config({monaco});
-
 const useStyles = createStyles((theme) => ({
     root: {},
     editor: {
@@ -66,10 +65,18 @@ interface CodeEditorProps
      */
     maxHeight?: number;
     disabled?: boolean;
+    /**
+     * Defines how the monaco editor files will be loaded.
+     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).
+     *
+     * @default 'local'
+     */
+    monacoLoader?: 'cdn' | 'local';
 }
 
 const defaultProps: Partial<CodeEditorProps> = {
     language: 'plaintext',
+    monacoLoader: 'local',
     defaultValue: '',
     minHeight: 300,
 };
@@ -91,8 +98,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         minHeight,
         maxHeight,
         disabled,
+        monacoLoader,
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
+    const [loaded, setLoaded] = useState(false);
     const {classes, theme} = useStyles();
     const [_value, handleChange] = useUncontrolled<string>({
         value,
@@ -102,6 +111,20 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
 
+    const loadLocalMonaco = async () => {
+        const monaco = await import('monaco-editor');
+        loader.config({monaco});
+        setLoaded(true);
+    };
+
+    useEffect(() => {
+        if (monacoLoader === 'local') {
+            loadLocalMonaco();
+        } else {
+            setLoaded(true);
+        }
+    }, []);
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}
@@ -142,7 +165,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         </Group>
     );
 
-    const _editor = (
+    const _editor = loaded ? (
         <Box p="md" pl="xs" className={classes.editor}>
             <Editor
                 defaultLanguage={language}
@@ -167,6 +190,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 }}
             />
         </Box>
+    ) : (
+        <Center className={classes.editor}>
+            <Loader />
+        </Center>
     );
 
     return (

package/src/components/code-editor/__mocks__/monaco-editor.ts

@@ -0,0 +1,9 @@
+const editor = {
+    create: () => ({
+        dispose: (): void => null,
+    }),
+};
+
+export const monaco = {
+    editor,
+};

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

@@ -1,22 +1,27 @@
 import {useForm} from '@mantine/form';
-import {render, screen, within} from '@test-utils';
+import {loader} from '@monaco-editor/react';
+import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
 
 import {CodeEditor} from '../CodeEditor';
 
-jest.mock('monaco-editor');
-jest.mock('@monaco-editor/react');
-
 describe('CodeEditor', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it('renders the monaco editor and a copy to clipboard button', async () => {
+        jest.mock('monaco-editor');
         render(<CodeEditor label="label" description="description" />);
 
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
         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', () => {
+    it('shows validation errors underneath the code editor', async () => {
         const Fixture = () => {
             const form = useForm({
                 initialValues: {
@@ -29,9 +34,23 @@ describe('CodeEditor', () => {
             return <CodeEditor {...form.getInputProps('myJsonCode')} />;
         };
         render(<Fixture />);
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
 
         const errors = screen.getByRole('alert');
 
         expect(within(errors).getByText(/invalid configuration/i)).toBeInTheDocument();
     });
+
+    it('loads the monaco editor files from node_modules when monacoLoader prop is "local"', async () => {
+        render(<CodeEditor label="label" description="description" monacoLoader="local" />);
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+        expect(loader.config).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+    });
+
+    it('loads the monaco editor files via CDN when monacoLoader prop is "cnd"', async () => {
+        render(<CodeEditor label="label" description="description" monacoLoader="cdn" />);
+        expect(loader.config).not.toHaveBeenCalled();
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+    });
 });

package/src/components/collection/Collection.tsx

@@ -27,6 +27,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
     onChange?: (value: T[]) => void;
     draggable?: boolean;
     disabled?: boolean;
+    allowAdd?: (values: T[]) => boolean;
     addLabel?: string;
     addDisabledTooltip?: string;
     spacing?: MantineNumberSize;
@@ -47,7 +48,6 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         value,
         defaultValue,
         onChange,
-        onFocus,
         disabled,
         draggable,
         children,
@@ -56,6 +56,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         newItem,
         addLabel,
         addDisabledTooltip,
+        allowAdd,
 
         // Style props
         classNames,
@@ -84,17 +85,17 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         </CollectionItem>
     ));
 
-    const hasEmptyItem = values.some((item) => JSON.stringify(item) === JSON.stringify(newItem));
+    const addAllowed = allowAdd?.(values) ?? true;
 
     const _addButton = disabled ? null : (
         <Group>
-            <Tooltip label={addDisabledTooltip} disabled={!hasEmptyItem}>
+            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
                 <Box>
                     <Button
                         variant="subtle"
                         leftIcon={<AddSize16Px height={16} />}
                         onClick={() => append(newItem)}
-                        disabled={hasEmptyItem}
+                        disabled={!addAllowed}
                     >
                         {addLabel}
                     </Button>

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

@@ -96,12 +96,13 @@ describe('Collection', () => {
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
     });
 
-    it('disallows from adding more than one new item at once', () => {
+    it('disables the add button whenever allowAdd callback returns false', () => {
+        const allowAdd = jest.fn().mockImplementation(() => false);
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
                 <>
-                    <Collection newItem="new" {...form.getInputProps('fruits')}>
+                    <Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
@@ -109,10 +110,13 @@ describe('Collection', () => {
             );
         };
 
-        render(<Fixture />);
-        const addItem = screen.getByRole('button', {name: /add/i});
-        userEvent.click(addItem);
-        expect(addItem).toBeDisabled();
+        const {rerender} = render(<Fixture />);
+        expect(screen.getByRole('button', {name: /add/i})).toBeDisabled();
+        expect(allowAdd).toHaveBeenCalledWith(['banana', 'orange']);
+
+        allowAdd.mockImplementation(() => true);
+        rerender(<Fixture />);
+        expect(screen.getByRole('button', {name: /add/i})).toBeEnabled();
     });
 
     describe('when required is true', () => {

package/src/components/modal-wizard/index.ts

@@ -1 +1,2 @@
 export * from './ModalWizard';
+export {type ModalWizardStepProps} from './ModalWizardStep';

package/src/index.ts

@@ -2,7 +2,7 @@ import {Tuple} from '@mantine/core';
 
 import {PlasmaColors} from './theme/PlasmaColors';
 
-export {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+export {type ColumnDef, createColumnHelper} from '@tanstack/table-core';
 
 export * from '@mantine/core';
 export * from '@mantine/form';

package/tsconfig.json

@@ -4,8 +4,11 @@
         "outDir": "./dist",
         "declarationDir": "./dist/definitions",
         "rootDir": "src",
-        "tsBuildInfoFile": "./dist/.tsbuildinfo"
+        "tsBuildInfoFile": "./dist/.tsbuildinfo",
+        "baseUrl": ".",
+        "paths": {
+            "@test-utils": ["./src/__tests__/Utils.tsx"]
+        }
     },
-    "include": ["src"],
-    "exclude": ["*.spec.*"]
+    "include": ["src"]
 }