@coveord/plasma-mantine 48.17.5 → 48.18.1

package/dist/esm/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monaco = await import('monaco-editor');\n        loader.config({monaco});\n        setLoaded(true);\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description mt=\"xs\" {...descriptionProps}>\n            {description}\n        </Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useParentHeight","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monaco","config","_label","Label","_description","Description","mt","_error","Error","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, useMonaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [registered, setRegistered] = useState(false);\n    const monaco = useMonaco();\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (monaco && language === 'xml' && !registered) {\n            XML.register(monaco);\n            setRegistered(true);\n        }\n    }, [monaco, language]);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description mt=\"xs\" {...descriptionProps}>\n            {description}\n        </Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useMonaco","useEffect","useState","useParentHeight","XML","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","registered","setRegistered","monaco","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monacoInstance","config","register","_label","Label","_description","Description","mt","_error","Error","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js

@@ -8,5 +8,8 @@ export default MockedEditor;
 export var loader = {
     config: jest.fn()
 };
+export var useMonaco = function() {
+    return jest.fn();
+};
 
 //# sourceMappingURL=react.js.map

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {type EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n"],"names":["MockedEditor","props","div","data-testid","loader","config","jest","fn"],"mappings":"AAAA;AAGA,IAAMA,eAA+C,SAACC;yBAAU,KAACC;QAAIC,eAAY;;;AAEjF,eAAeH,aAAa;AAE5B,OAAO,IAAMI,SAAS;IAClBC,QAAQC,KAAKC,EAAE;AACnB,EAAE"}
+{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n\nexport const useMonaco = () => jest.fn();\n"],"names":["MockedEditor","props","div","data-testid","loader","config","jest","fn","useMonaco"],"mappings":"AAAA;AAGA,IAAMA,eAA+C,SAACC;yBAAU,KAACC;QAAIC,eAAY;;;AAEjF,eAAeH,aAAa;AAE5B,OAAO,IAAMI,SAAS;IAClBC,QAAQC,KAAKC,EAAE;AACnB,EAAE;AAEF,OAAO,IAAMC,YAAY;WAAMF,KAAKC,EAAE;EAAG"}

package/dist/esm/components/code-editor/languages/xml.js

@@ -0,0 +1,50 @@
+import _async_to_generator from "@swc/helpers/src/_async_to_generator.mjs";
+import _ts_generator from "@swc/helpers/src/_ts_generator.mjs";
+var format = function(xml) {
+    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
+    var PADDING = " ".repeat(2);
+    var reg = /(>)(<)(\/*)/g;
+    var pad = 0;
+    xml = xml.replace(reg, "$1\r\n$2$3");
+    return xml.split("\r\n").map(function(node) {
+        var indent = 0;
+        if (node.match(/.+<\/\w[^>]*>$/)) {
+            indent = 0;
+        } else if (node.match(/^<\/\w/) && pad > 0) {
+            pad -= 1;
+        } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+            indent = 1;
+        } else {
+            indent = 0;
+        }
+        pad += indent;
+        return PADDING.repeat(pad - indent) + node;
+    }).join("\r\n");
+};
+var register = function(monaco) {
+    monaco.languages.registerDocumentFormattingEditProvider("xml", {
+        provideDocumentFormattingEdits: function() {
+            var _ref = _async_to_generator(function(model) {
+                return _ts_generator(this, function(_state) {
+                    return [
+                        2,
+                        [
+                            {
+                                range: model.getFullModelRange(),
+                                text: format(model.getValue())
+                            }
+                        ]
+                    ];
+                });
+            });
+            return function(model) {
+                return _ref.apply(this, arguments);
+            };
+        }()
+    });
+};
+export var XML = {
+    register: register
+};
+
+//# sourceMappingURL=xml.js.map

package/dist/esm/components/code-editor/languages/xml.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/languages/xml.ts"],"sourcesContent":["import {Monaco} from '@monaco-editor/react';\n\nconst format = (xml: string): string => {\n    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default\n    const PADDING = ' '.repeat(2);\n    const reg = /(>)(<)(\\/*)/g;\n    let pad = 0;\n\n    xml = xml.replace(reg, '$1\\r\\n$2$3');\n\n    return xml\n        .split('\\r\\n')\n        .map((node) => {\n            let indent = 0;\n            if (node.match(/.+<\\/\\w[^>]*>$/)) {\n                indent = 0;\n            } else if (node.match(/^<\\/\\w/) && pad > 0) {\n                pad -= 1;\n            } else if (node.match(/^<\\w[^>]*[^/]>.*$/)) {\n                indent = 1;\n            } else {\n                indent = 0;\n            }\n\n            pad += indent;\n\n            return PADDING.repeat(pad - indent) + node;\n        })\n        .join('\\r\\n');\n};\n\nconst register = (monaco: Monaco): void => {\n    monaco.languages.registerDocumentFormattingEditProvider('xml', {\n        provideDocumentFormattingEdits: async (model) => [\n            {\n                range: model.getFullModelRange(),\n                text: format(model.getValue()),\n            },\n        ],\n    });\n};\n\nexport const XML = {register};\n"],"names":["format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue","XML"],"mappings":"AAAA;;AAEA,IAAMA,SAAS,SAACC,KAAwB;IACpC,oGAAoG;IACpG,IAAMC,UAAU,IAAIC,MAAM,CAAC;IAC3B,IAAMC,MAAM;IACZ,IAAIC,MAAM;IAEVJ,MAAMA,IAAIK,OAAO,CAACF,KAAK;IAEvB,OAAOH,IACFM,KAAK,CAAC,QACNC,GAAG,CAAC,SAACC,MAAS;QACX,IAAIC,SAAS;QACb,IAAID,KAAKE,KAAK,CAAC,mBAAmB;YAC9BD,SAAS;QACb,OAAO,IAAID,KAAKE,KAAK,CAAC,aAAaN,MAAM,GAAG;YACxCA,OAAO;QACX,OAAO,IAAII,KAAKE,KAAK,CAAC,sBAAsB;YACxCD,SAAS;QACb,OAAO;YACHA,SAAS;QACb,CAAC;QAEDL,OAAOK;QAEP,OAAOR,QAAQC,MAAM,CAACE,MAAMK,UAAUD;IAC1C,GACCG,IAAI,CAAC;AACd;AAEA,IAAMC,WAAW,SAACC,QAAyB;IACvCA,OAAOC,SAAS,CAACC,sCAAsC,CAAC,OAAO;QAC3DC,8BAA8B;uBAAE,oBAAA,SAAOC;;oBAAU;;;4BAC7C;gCACIC,OAAOD,MAAME,iBAAiB;gCAC9BC,MAAMrB,OAAOkB,MAAMI,QAAQ;4BAC/B;;;;;4BAJmCJ;;;;IAM3C;AACJ;AAEA,OAAO,IAAMK,MAAM;IAACV,UAAAA;AAAQ,EAAE"}

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

@@ -4,12 +4,12 @@ import _object_without_properties from "@swc/helpers/src/_object_without_propert
 import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AddSize16Px } from "@coveord/plasma-react-icons";
-import { Box, Button, Group, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
+import { Box, Button, Group, Input, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
 import { useId } from "@mantine/hooks";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { useControlledList } from "../../hooks";
 import { CollectionItem } from "./CollectionItem";
-import useStyles from "./Colllection.styles";
+import useStyles from "./Collection.styles";
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -19,7 +19,7 @@ var defaultProps = {
     required: false
 };
 export var Collection = function(props) {
-    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, // Style props
+    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties(_useComponentDefaultProps, [
         "value",
         "defaultValue",
@@ -34,6 +34,12 @@ export var Collection = function(props) {
         "addLabel",
         "addDisabledTooltip",
         "allowAdd",
+        "label",
+        "labelProps",
+        "description",
+        "descriptionProps",
+        "error",
+        "errorProps",
         "classNames",
         "className",
         "styles",
@@ -58,6 +64,24 @@ export var Collection = function(props) {
             onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
         };
     };
+    var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
+        required: required
+    }, labelProps), {
+        children: label
+    })) : null;
+    var _description = description ? /*#__PURE__*/ _jsx(Input.Description, _object_spread_props(_object_spread({}, descriptionProps), {
+        children: description
+    })) : null;
+    var _error = error ? /*#__PURE__*/ _jsx(Input.Error, _object_spread_props(_object_spread({}, errorProps), {
+        children: error
+    })) : null;
+    var _header = _label || _description ? /*#__PURE__*/ _jsxs(Stack, {
+        spacing: "xs",
+        children: [
+            _label,
+            _description
+        ]
+    }) : null;
     var items = values.map(function(item, index) {
         return /*#__PURE__*/ _jsx(CollectionItem, {
             disabled: disabled,
@@ -107,11 +131,17 @@ export var Collection = function(props) {
                     className: cx(classes.root, className)
                 }), others), {
                     children: /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: spacing,
                         children: [
-                            items,
-                            provided.placeholder,
-                            _addButton
+                            _header,
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: spacing,
+                                children: [
+                                    items,
+                                    provided.placeholder,
+                                    _addButton,
+                                    _error
+                                ]
+                            })
                         ]
                     })
                 }));

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    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\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        onRemoveItem,\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 removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\n    };\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","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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"}
+{"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    Input,\n    InputWrapperBaseProps,\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';\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Collection.styles';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\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        onRemoveItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\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 removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Stack spacing=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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>\n                            {_header}\n                            <Stack spacing={spacing}>\n                                {items}\n                                {provided.placeholder}\n                                {_addButton}\n                                {_error}\n                            </Stack>\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["AddSize16Px","Box","Button","Group","Input","Stack","Tooltip","useComponentDefaultProps","useId","DragDropContext","Droppable","useControlledList","CollectionItem","useStyles","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Label","_description","Description","_error","Error","_header","items","map","item","onRemove","removable","addAllowed","_addButton","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/collection/{Colllection.styles.js → Collection.styles.js}

@@ -12,4 +12,4 @@ export default createStyles(function(theme) {
     };
 });
 
-//# sourceMappingURL=Colllection.styles.js.map
+//# sourceMappingURL=Collection.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ;GAAI"}

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragAndDropSize16Px, RemoveSize16Px } from "@coveord/plasma-react-icons";
 import { ActionIcon, Group } from "@mantine/core";
 import { Draggable } from "react-beautiful-dnd";
-import useStyles from "./Colllection.styles";
+import useStyles from "./Collection.styles";
 var RemoveButton = function(param) {
     var onClick = param.onClick;
     return /*#__PURE__*/ _jsx(ActionIcon, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Colllection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const {classes, cx} = useStyles();\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize16Px","RemoveSize16Px","ActionIcon","Group","Draggable","useStyles","RemoveButton","onClick","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","name","classes","cx","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","index","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","CollectionItem","draggable","disabled","otherProps"],"mappings":"AAAA;;;;;AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAEzE,SAAQC,SAAS,QAAO,sBAAsB;AAE9C,OAAOC,eAAe,uBAAuB;AAa7C,IAAMC,eAED;QAAEC,gBAAAA;yBACH,KAACL;QAAWM,SAAQ;QAASD,SAASA;QAASE,OAAM;kBACjD,cAAA,KAACR;YAAeS,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;uBAAe,KAACL,4BAA0B;IAE9G,qBACI,MAACR;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,IAAMG,yBAA0F,gBAAgB;QAAdP,iBAAAA;IAC9F,IAAsBd,aAAAA,aAAfgB,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,qBAAO,KAACnB;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;kBAAIN;;AAChD;AAEA,IAAMQ,0BAA2F,gBAM3F;QALFC,cAAAA,OACAZ,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;SAAe,IAAI;IAEvF,qBACI,KAACZ;QAAUwB,OAAOA;QAAOC,aAAaD,MAAME,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,MAAC7B;gBACG8B,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BX,WAAWF,GAAGD,QAAQI,IAAI,EAAG,qBAACJ,QAAQe,YAAY,EAAGJ;;kCAErD,KAACpB,+CAAQmB,SAASM,eAAe;kCAC7B,cAAA,KAACrC;4BAAoBU,QAAQ;;;oBAEhCS;oBACAI;;;;;AAKrB;AAEA,OAAO,IAAMe,iBAA4E,iBAInF;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,KAACd,2CAA2Be;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,KAACZ,4CAA4Bc;IACxC,CAAC;IACD,qBAAO,KAAC1B,yCAAyB0B;AACrC,EAAE"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const {classes, cx} = useStyles();\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize16Px","RemoveSize16Px","ActionIcon","Group","Draggable","useStyles","RemoveButton","onClick","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","name","classes","cx","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","index","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","CollectionItem","draggable","disabled","otherProps"],"mappings":"AAAA;;;;;AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAEzE,SAAQC,SAAS,QAAO,sBAAsB;AAE9C,OAAOC,eAAe,sBAAsB;AAa5C,IAAMC,eAED;QAAEC,gBAAAA;yBACH,KAACL;QAAWM,SAAQ;QAASD,SAASA;QAASE,OAAM;kBACjD,cAAA,KAACR;YAAeS,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;uBAAe,KAACL,4BAA0B;IAE9G,qBACI,MAACR;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,IAAMG,yBAA0F,gBAAgB;QAAdP,iBAAAA;IAC9F,IAAsBd,aAAAA,aAAfgB,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,qBAAO,KAACnB;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;kBAAIN;;AAChD;AAEA,IAAMQ,0BAA2F,gBAM3F;QALFC,cAAAA,OACAZ,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;SAAe,IAAI;IAEvF,qBACI,KAACZ;QAAUwB,OAAOA;QAAOC,aAAaD,MAAME,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,MAAC7B;gBACG8B,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BX,WAAWF,GAAGD,QAAQI,IAAI,EAAG,qBAACJ,QAAQe,YAAY,EAAGJ;;kCAErD,KAACpB,+CAAQmB,SAASM,eAAe;kCAC7B,cAAA,KAACrC;4BAAoBU,QAAQ;;;oBAEhCS;oBACAI;;;;;AAKrB;AAEA,OAAO,IAAMe,iBAA4E,iBAInF;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,KAACd,2CAA2Be;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,KAACZ,4CAA4Bc;IACxC,CAAC;IACD,qBAAO,KAAC1B,yCAAyB0B;AACrC,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.17.5",
+  "version": "48.18.1",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

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

@@ -17,10 +17,11 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
-import Editor, {loader} from '@monaco-editor/react';
+import Editor, {loader, useMonaco} from '@monaco-editor/react';
 import {FunctionComponent, useEffect, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
+import {XML} from './languages/xml';
 
 const useStyles = createStyles((theme) => ({
     root: {},
@@ -40,7 +41,7 @@ interface CodeEditorProps
      *
      * @default 'plaintext'
      */
-    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';
     /** Default value for uncontrolled input */
     defaultValue?: string;
     /** Value for controlled input */
@@ -103,6 +104,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
+    const [registered, setRegistered] = useState(false);
+    const monaco = useMonaco();
     const {classes, theme} = useStyles();
     const [_value, handleChange] = useUncontrolled<string>({
         value,
@@ -113,8 +116,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const [parentHeight, ref] = useParentHeight();
 
     const loadLocalMonaco = async () => {
-        const monaco = await import('monaco-editor');
-        loader.config({monaco});
+        const monacoInstance = await import('monaco-editor');
+        loader.config({monaco: monacoInstance});
         setLoaded(true);
     };
 
@@ -126,6 +129,13 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
+    useEffect(() => {
+        if (monaco && language === 'xml' && !registered) {
+            XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [monaco, language]);
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}

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

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

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

@@ -3,6 +3,7 @@ import {loader} from '@monaco-editor/react';
 import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
 
 import {CodeEditor} from '../CodeEditor';
+import {XML} from '../languages/xml';
 
 describe('CodeEditor', () => {
     beforeEach(() => {
@@ -53,4 +54,10 @@ describe('CodeEditor', () => {
         expect(loader.config).not.toHaveBeenCalled();
         expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
     });
+
+    it('loads the xml language in the monaco instance if the editor language is xml', () => {
+        const xmlLanguageSpy = jest.spyOn(XML, 'register').mockImplementation();
+        render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
+        expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);
+    });
 });

package/src/components/code-editor/languages/xml.ts

@@ -0,0 +1,43 @@
+import {Monaco} from '@monaco-editor/react';
+
+const format = (xml: string): string => {
+    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
+    const PADDING = ' '.repeat(2);
+    const reg = /(>)(<)(\/*)/g;
+    let pad = 0;
+
+    xml = xml.replace(reg, '$1\r\n$2$3');
+
+    return xml
+        .split('\r\n')
+        .map((node) => {
+            let indent = 0;
+            if (node.match(/.+<\/\w[^>]*>$/)) {
+                indent = 0;
+            } else if (node.match(/^<\/\w/) && pad > 0) {
+                pad -= 1;
+            } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+                indent = 1;
+            } else {
+                indent = 0;
+            }
+
+            pad += indent;
+
+            return PADDING.repeat(pad - indent) + node;
+        })
+        .join('\r\n');
+};
+
+const register = (monaco: Monaco): void => {
+    monaco.languages.registerDocumentFormattingEditProvider('xml', {
+        provideDocumentFormattingEdits: async (model) => [
+            {
+                range: model.getFullModelRange(),
+                text: format(model.getValue()),
+            },
+        ],
+    });
+};
+
+export const XML = {register};

package/src/components/collection/Collection.tsx

@@ -4,6 +4,8 @@ import {
     Button,
     DefaultProps,
     Group,
+    Input,
+    InputWrapperBaseProps,
     MantineNumberSize,
     Selectors,
     Stack,
@@ -13,12 +15,13 @@ import {
 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';
+import useStyles from './Collection.styles';
 
-interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+interface CollectionProps<T>
+    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,
+        DefaultProps<Selectors<typeof useStyles>> {
     /**
      * The default value each new item should have
      */
@@ -125,6 +128,12 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         addLabel,
         addDisabledTooltip,
         allowAdd,
+        label,
+        labelProps,
+        description,
+        descriptionProps,
+        error,
+        errorProps,
 
         // Style props
         classNames,
@@ -144,6 +153,24 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         onRemoveItem?.(index);
     };
 
+    const _label = label ? (
+        <Input.Label required={required} {...labelProps}>
+            {label}
+        </Input.Label>
+    ) : null;
+
+    const _description = description ? (
+        <Input.Description {...descriptionProps}>{description}</Input.Description>
+    ) : null;
+    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
+    const _header =
+        _label || _description ? (
+            <Stack spacing="xs">
+                {_label}
+                {_description}
+            </Stack>
+        ) : null;
+
     const items = values.map((item, index) => (
         <CollectionItem
             key={index}
@@ -189,10 +216,14 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
                         className={cx(classes.root, className)}
                         {...others}
                     >
-                        <Stack spacing={spacing}>
-                            {items}
-                            {provided.placeholder}
-                            {_addButton}
+                        <Stack>
+                            {_header}
+                            <Stack spacing={spacing}>
+                                {items}
+                                {provided.placeholder}
+                                {_addButton}
+                                {_error}
+                            </Stack>
                         </Stack>
                     </Box>
                 )}

package/src/components/collection/CollectionItem.tsx

@@ -3,7 +3,7 @@ import {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
 import {Draggable} from 'react-beautiful-dnd';
 
-import useStyles from './Colllection.styles';
+import useStyles from './Collection.styles';
 
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;

package/dist/cjs/components/collection/Colllection.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Colllection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA;;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}

package/dist/definitions/components/collection/Colllection.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colllection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Colllection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;AAE1C,wBASI"}

package/dist/esm/components/collection/Colllection.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Colllection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ;GAAI"}