@coveord/plasma-mantine 48.17.5 → 48.18.1

package/dist/cjs/components/code-editor/CodeEditor.js

@@ -22,6 +22,7 @@ var _hooks = require("@mantine/hooks");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("@monaco-editor/react"));
 var _react1 = require("react");
 var _hooks1 = require("../../hooks");
+var _xml = require("./languages/xml");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {},
@@ -59,6 +60,8 @@ var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _slicedToArray((0, _react1.useState)(false), 2), loaded = _useState[0], setLoaded = _useState[1];
+    var _useState1 = _slicedToArray((0, _react1.useState)(false), 2), registered = _useState1[0], setRegistered = _useState1[1];
+    var monaco = (0, _react.useMonaco)();
     var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _slicedToArray((0, _hooks.useUncontrolled)({
         value: value,
@@ -69,7 +72,7 @@ var CodeEditor = function(props) {
     var _useParentHeight = _slicedToArray((0, _hooks1.useParentHeight)(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
     var loadLocalMonaco = function() {
         var _ref = _asyncToGenerator(function() {
-            var monaco;
+            var monacoInstance;
             return _tsGenerator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -80,9 +83,9 @@ var CodeEditor = function(props) {
                             })
                         ];
                     case 1:
-                        monaco = _state.sent();
+                        monacoInstance = _state.sent();
                         _react.loader.config({
-                            monaco: monaco
+                            monaco: monacoInstance
                         });
                         setLoaded(true);
                         return [
@@ -102,6 +105,15 @@ var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    (0, _react1.useEffect)(function() {
+        if (monaco && language === "xml" && !registered) {
+            _xml.XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [
+        monaco,
+        language
+    ]);
     var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
         required: required
     }, labelProps), {

package/dist/cjs/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":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monaco","loader","config","useEffect","_label","Input","Label","_description","Description","mt","_error","Error","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","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":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","registered","setRegistered","monaco","useMonaco","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monacoInstance","loader","config","useEffect","XML","register","_label","Input","Label","_description","Description","mt","_error","Error","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","spacing","sx","Math","max"],"mappings":"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"}

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

@@ -14,6 +14,9 @@ _export(exports, {
     },
     loader: function() {
         return loader;
+    },
+    useMonaco: function() {
+        return useMonaco;
     }
 });
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,5 +29,8 @@ var _default = MockedEditor;
 var loader = {
     config: jest.fn()
 };
+var useMonaco = function() {
+    return jest.fn();
+};
 
 //# sourceMappingURL=react.js.map

package/dist/cjs/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":["loader","MockedEditor","props","div","data-testid","config","jest","fn"],"mappings":"AAAA;;;;;;;;;;;IAKA,OAA4B;eAA5B;;IAEaA,MAAM;eAANA;;;;AAJb,IAAMC,eAA+C,SAACC;yBAAU,qBAACC;QAAIC,eAAY;;;IAEjF,WAAeH;AAER,IAAMD,SAAS;IAClBK,QAAQC,KAAKC,EAAE;AACnB"}
+{"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":["loader","useMonaco","MockedEditor","props","div","data-testid","config","jest","fn"],"mappings":"AAAA;;;;;;;;;;;IAKA,OAA4B;eAA5B;;IAEaA,MAAM;eAANA;;IAIAC,SAAS;eAATA;;;;AARb,IAAMC,eAA+C,SAACC;yBAAU,qBAACC;QAAIC,eAAY;;;IAEjF,WAAeH;AAER,IAAMF,SAAS;IAClBM,QAAQC,KAAKC,EAAE;AACnB;AAEO,IAAMP,YAAY;WAAMM,KAAKC,EAAE"}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "XML", {
+    enumerable: true,
+    get: function() {
+        return XML;
+    }
+});
+var _asyncToGenerator = require("@swc/helpers/lib/_async_to_generator.js").default;
+var _tsGenerator = require("@swc/helpers/lib/_ts_generator.js").default;
+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 = _asyncToGenerator(function(model) {
+                return _tsGenerator(this, function(_state) {
+                    return [
+                        2,
+                        [
+                            {
+                                range: model.getFullModelRange(),
+                                text: format(model.getValue())
+                            }
+                        ]
+                    ];
+                });
+            });
+            return function(model) {
+                return _ref.apply(this, arguments);
+            };
+        }()
+    });
+};
+var XML = {
+    register: register
+};
+
+//# sourceMappingURL=xml.js.map

package/dist/cjs/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":["XML","format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue"],"mappings":"AAAA;;;;+BA0CaA;;;eAAAA;;;;;AAxCb,IAAMC,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,kBAAA,SAAOC;;oBAAU;;;4BAC7C;gCACIC,OAAOD,MAAME,iBAAiB;gCAC9BC,MAAMrB,OAAOkB,MAAMI,QAAQ;4BAC/B;;;;;4BAJmCJ;;;;IAM3C;AACJ;AAEO,IAAMnB,MAAM;IAACc,UAAAA;AAAQ"}

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

@@ -20,7 +20,7 @@ var _hooks = require("@mantine/hooks");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
 var _hooks1 = require("../../hooks");
 var _collectionItem = require("./CollectionItem");
-var _colllectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Colllection.styles"));
+var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -30,7 +30,7 @@ var defaultProps = {
     required: false
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.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 = (0, _core.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 = _objectWithoutProperties(_useComponentDefaultProps, [
         "value",
         "defaultValue",
@@ -45,12 +45,18 @@ var Collection = function(props) {
         "addLabel",
         "addDisabledTooltip",
         "allowAdd",
+        "label",
+        "labelProps",
+        "description",
+        "descriptionProps",
+        "error",
+        "errorProps",
         "classNames",
         "className",
         "styles",
         "unstyled"
     ]);
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         classNames: classNames,
         name: "Collection",
         styles: styles,
@@ -69,6 +75,24 @@ var Collection = function(props) {
             onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
         };
     };
+    var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
+        required: required
+    }, labelProps), {
+        children: label
+    })) : null;
+    var _description = description ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Description, _objectSpreadProps(_objectSpread({}, descriptionProps), {
+        children: description
+    })) : null;
+    var _error = error ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Error, _objectSpreadProps(_objectSpread({}, errorProps), {
+        children: error
+    })) : null;
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
+        spacing: "xs",
+        children: [
+            _label,
+            _description
+        ]
+    }) : null;
     var items = values.map(function(item, index) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
             disabled: disabled,
@@ -118,11 +142,17 @@ var Collection = function(props) {
                     className: cx(classes.root, className)
                 }), others), {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
-                        spacing: spacing,
                         children: [
-                            items,
-                            provided.placeholder,
-                            _addButton
+                            _header,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
+                                spacing: spacing,
+                                children: [
+                                    items,
+                                    provided.placeholder,
+                                    _addButton,
+                                    _error
+                                ]
+                            })
                         ]
                     })
                 }));

package/dist/cjs/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":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","label","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","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":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Input","Label","_description","Description","_error","Error","_header","Stack","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}

package/dist/cjs/components/collection/{Colllection.styles.js → Collection.styles.js}

@@ -22,4 +22,4 @@ var _default = (0, _core.createStyles)(function(theme) {
     };
 });
 
-//# sourceMappingURL=Colllection.styles.js.map
+//# sourceMappingURL=Collection.styles.js.map

package/dist/cjs/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;;;;+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/cjs/components/collection/CollectionItem.js

@@ -17,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
-var _colllectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Colllection.styles"));
+var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
 var RemoveButton = function(param) {
     var onClick = param.onClick;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
@@ -38,7 +38,7 @@ var RemoveButtonPlaceholder = function() {
 };
 var StaticCollectionItem = function(param) {
     var onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         name: "Collection",
         styles: styles
     }), classes = _useStyles.classes, cx = _useStyles.cx;
@@ -55,7 +55,7 @@ var StaticCollectionItem = function(param) {
 };
 var DisabledCollectionItem = function(param) {
     var children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(), classes = _useStyles.classes, cx = _useStyles.cx;
+    var _useStyles = (0, _collectionStyles.default)(), classes = _useStyles.classes, cx = _useStyles.cx;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
         className: cx(classes.item),
         children: children
@@ -63,7 +63,7 @@ var DisabledCollectionItem = function(param) {
 };
 var DraggableCollectionItem = function(param) {
     var index = param.index, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         name: "Collection",
         styles: styles
     }), classes = _useStyles.classes, cx = _useStyles.cx;

package/dist/cjs/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":["CollectionItem","RemoveButton","onClick","ActionIcon","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":"AAAA;;;;+BA+EaA;;;eAAAA;;;;;;;;;gCA/EqC;oBACO;iCAEjC;sEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,SAAQ;QAASF,SAASA;QAASG,OAAM;kBACjD,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,0BAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAAgB;QAAdT,iBAAAA;IAC9F,IAAsBC,aAAAA,IAAAA,0BAAS,KAAxBE,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,0BAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAACD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;kCAC7B,cAAA,qBAACC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMrB,iBAA4E,iBAInF;QAHFuC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}
+{"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":["CollectionItem","RemoveButton","onClick","ActionIcon","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":"AAAA;;;;+BA+EaA;;;eAAAA;;;;;;;;;gCA/EqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,SAAQ;QAASF,SAASA;QAASG,OAAM;kBACjD,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAAgB;QAAdT,iBAAAA;IAC9F,IAAsBC,aAAAA,IAAAA,yBAAS,KAAxBE,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAACD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;kCAC7B,cAAA,qBAACC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMrB,iBAA4E,iBAInF;QAHFuC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}

package/dist/definitions/components/code-editor/CodeEditor.d.ts

@@ -11,7 +11,7 @@ interface CodeEditorProps extends Omit<InputWrapperBaseProps, 'inputContainer' |
      *
      * @default 'plaintext'
      */
-    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';
     /** Default value for uncontrolled input */
     defaultValue?: string;
     /** Value for controlled input */

package/dist/definitions/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI7D,QAAA,MAAM,SAAS;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACxD,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoIzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAK7D,QAAA,MAAM,SAAS;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA6IzD,CAAC"}

package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="jest" />
-import { type EditorProps } from '@monaco-editor/react';
+import { EditorProps } from '@monaco-editor/react';
 import { FunctionComponent } from 'react';
 declare const MockedEditor: FunctionComponent<EditorProps>;
 export default MockedEditor;
 export declare const loader: {
     config: jest.Mock<any, any>;
 };
+export declare const useMonaco: () => jest.Mock<any, any>;
 //# sourceMappingURL=react.d.ts.map

package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,WAAW,CAAkD,CAAC;AAEpG,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,MAAM;;CAElB,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,WAAW,CAAkD,CAAC;AAEpG,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,MAAM;;CAElB,CAAC;AAEF,eAAO,MAAM,SAAS,2BAAkB,CAAC"}

package/dist/definitions/components/code-editor/languages/xml.d.ts

@@ -0,0 +1,5 @@
+import { Monaco } from '@monaco-editor/react';
+export declare const XML: {
+    register: (monaco: Monaco) => void;
+};
+//# sourceMappingURL=xml.d.ts.map

package/dist/definitions/components/code-editor/languages/xml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xml.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/languages/xml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AA0C5C,eAAO,MAAM,GAAG;uBAXU,MAAM,KAAG,IAAI;CAWV,CAAC"}

package/dist/definitions/components/collection/Collection.d.ts

@@ -1,7 +1,7 @@
-import { DefaultProps, MantineNumberSize, Selectors } from '@mantine/core';
+import { DefaultProps, InputWrapperBaseProps, MantineNumberSize, Selectors } from '@mantine/core';
 import { ReactNode } from 'react';
-import useStyles from './Colllection.styles';
-interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+import useStyles from './Collection.styles';
+interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
     /**
      * The default value each new item should have
      */

package/dist/definitions/components/collection/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC1E;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAyFtB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAqHtB,CAAC"}

package/dist/definitions/components/collection/{Colllection.styles.d.ts → Collection.styles.d.ts}

@@ -6,4 +6,4 @@ declare const _default: (params: void, options?: import("@mantine/core").UseStyl
     theme: import("@mantine/core").MantineTheme;
 };
 export default _default;
-//# sourceMappingURL=Colllection.styles.d.ts.map
+//# sourceMappingURL=Collection.styles.d.ts.map

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

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

package/dist/definitions/components/collection/CollectionItem.d.ts

@@ -1,6 +1,6 @@
 import { DefaultProps, Selectors } from '@mantine/core';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import useStyles from './Colllection.styles';
+import useStyles from './Collection.styles';
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;
     disabled: boolean;

package/dist/definitions/components/collection/CollectionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AA+DD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AA+DD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

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

@@ -8,9 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckSize16Px, CopySize16Px } from "@coveord/plasma-react-icons";
 import { ActionIcon, Box, Center, CopyButton, createStyles, Group, Input, Loader, Space, Stack, Tooltip, 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 { useEffect, useState } from "react";
 import { useParentHeight } from "../../hooks";
+import { XML } from "./languages/xml";
 var useStyles = createStyles(function(theme) {
     return {
         root: {},
@@ -48,6 +49,8 @@ export var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array(useState(false), 2), loaded = _useState[0], setLoaded = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), registered = _useState1[0], setRegistered = _useState1[1];
+    var monaco = useMonaco();
     var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array(useUncontrolled({
         value: value,
@@ -58,7 +61,7 @@ export var CodeEditor = function(props) {
     var _useParentHeight = _sliced_to_array(useParentHeight(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
     var loadLocalMonaco = function() {
         var _ref = _async_to_generator(function() {
-            var monaco;
+            var monacoInstance;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -67,9 +70,9 @@ export var CodeEditor = function(props) {
                             import("monaco-editor")
                         ];
                     case 1:
-                        monaco = _state.sent();
+                        monacoInstance = _state.sent();
                         loader.config({
-                            monaco: monaco
+                            monaco: monacoInstance
                         });
                         setLoaded(true);
                         return [
@@ -89,6 +92,15 @@ export var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    useEffect(function() {
+        if (monaco && language === "xml" && !registered) {
+            XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [
+        monaco,
+        language
+    ]);
     var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
         required: required
     }, labelProps), {