@coveord/plasma-mantine 55.8.0 → 55.8.2

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

@@ -103,20 +103,12 @@ var CodeEditor = function(props) {
         }
     };
     var registerThemes = function(monaco) {
-        monaco.editor.defineTheme('light-disabled', {
+        monaco.editor.defineTheme('light', {
             base: 'vs',
             inherit: true,
             rules: [],
             colors: {
-                'editor.background': theme.colors.gray[2]
-            }
-        });
-        monaco.editor.defineTheme('vs-dark-disabled', {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [],
-            colors: {
-                'editor.background': theme.colors.navy[7]
+                'editor.background': theme.colors.gray[0]
             }
         });
     };
@@ -130,7 +122,7 @@ var CodeEditor = function(props) {
     var _useState1 = _sliced_to_array._((0, _react1.useState)(false), 2), hasMonacoError = _useState1[0], setHasMonacoError = _useState1[1];
     var hasMonacoErrorRef = (0, _react1.useRef)(false);
     hasMonacoErrorRef.current = hasMonacoError;
-    var renderErrorOutline = !!error || hasMonacoError;
+    var hasError = !!error || hasMonacoError;
     var theme = (0, _core.useMantineTheme)();
     var colorScheme = (0, _core.useMantineColorScheme)().colorScheme;
     (0, _react1.useEffect)(function() {
@@ -153,14 +145,13 @@ var CodeEditor = function(props) {
     var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
         children: description
     })) : null;
-    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({
-        mt: "xs"
-    }, errorProps), {
+    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
         children: error
     })) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
-        h: "xs"
+        h: "sm"
     });
-    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
+        gap: "xxs",
         children: [
             _label,
             _description
@@ -168,7 +159,7 @@ var CodeEditor = function(props) {
     }) : null;
     var _buttons = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
         justify: "right",
-        gap: 0,
+        gap: "xs",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_search.Search, {
                 handleSearch: handleSearch
@@ -188,7 +179,7 @@ var CodeEditor = function(props) {
     var _editor = loaded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
         p: "md",
         pl: "xs",
-        className: (0, _clsx.default)(_CodeEditormodulecss.default.editor, _define_property._({}, _CodeEditormodulecss.default.valid, !renderErrorOutline), _define_property._({}, _CodeEditormodulecss.default.error, renderErrorOutline), _define_property._({}, _CodeEditormodulecss.default.disabled, disabled)),
+        className: (0, _clsx.default)(_CodeEditormodulecss.default.root, _define_property._({}, _CodeEditormodulecss.default.error, hasError), _define_property._({}, _CodeEditormodulecss.default.disabled, disabled)),
         "data-testid": "editor-wrapper",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default, {
             onValidate: handleValidate,
@@ -203,17 +194,22 @@ var CodeEditor = function(props) {
                 formatOnPaste: true,
                 fontSize: (0, _core.px)(theme.fontSizes.xs),
                 readOnly: disabled,
+                stickyScroll: {
+                    enabled: false
+                },
                 tabSize: tabSize
             },
             value: _value,
             onChange: handleChange,
-            onMount: function(editor, monaco) {
+            beforeMount: function(monaco) {
+                registerLanguages(monaco);
+                registerThemes(monaco);
+            },
+            onMount: function(editor) {
                 editorRef.current = editor;
                 if (editorHandle) {
                     editorHandle.current = editor;
                 }
-                registerLanguages(monaco);
-                registerThemes(monaco);
                 editor.onDidFocusEditorText(function() {
                     return onFocus === null || onFocus === void 0 ? void 0 : onFocus();
                 });
@@ -256,14 +252,19 @@ var CodeEditor = function(props) {
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, _object_spread_props._(_object_spread._({
         justify: "flex-start",
-        gap: 0,
+        gap: "sm",
         h: Math.max(parentHeight, minHeight),
         mah: maxHeight,
         ref: ref
     }, others), {
         children: [
-            _header,
-            _buttons,
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+                justify: "space-between",
+                children: [
+                    _header,
+                    _buttons
+                ]
+            }),
             _editor,
             _error
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml';\nimport {Search} from './search';\ninterface CodeEditorProps\n    extends Omit<\n            InputWrapperProps,\n            'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'\n        >,\n        Omit<StackProps, 'onChange'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\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 search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\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     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\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        onCopy,\n        onSearch,\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        options: {tabSize} = {tabSize: 2},\n        editorHandle,\n        ...others\n    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light-disabled', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[2],\n            },\n        });\n        monaco.editor.defineTheme('vs-dark-disabled', {\n            base: 'vs-dark',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.navy[7],\n            },\n        });\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\n    const renderErrorOutline = !!error || hasMonacoError;\n    const theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));\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\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 _buttons = (\n        <Group justify=\"right\" gap={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\n    }\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.editor,\n                {[CodeEditorClasses.valid]: !renderErrorOutline},\n                {[CodeEditorClasses.error]: renderErrorOutline},\n                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs) as number,\n                    readOnly: disabled,\n                    tabSize,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack justify=\"flex-start\" gap={0} h={Math.max(parentHeight, minHeight)} mah={maxHeight} ref={ref} {...others}>\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","options","tabSize","editorHandle","others","useState","loaded","setLoaded","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","navy","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","renderErrorOutline","useMantineTheme","colorScheme","useMantineColorScheme","useEffect","handleValidate","markers","some","marker","severity","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","mt","Space","h","_header","Box","_buttons","Group","justify","gap","Search","CopyToClipboard","editorTheme","_editor","p","pl","className","cx","CodeEditorClasses","valid","data-testid","Editor","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","Center","Loader","Stack","Math","max","mah"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml';\nimport {Search} from './search';\ninterface CodeEditorProps\n    extends Omit<\n            InputWrapperProps,\n            'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'\n        >,\n        Omit<StackProps, 'onChange'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\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 search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\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     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\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        onCopy,\n        onSearch,\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        options: {tabSize} = {tabSize: 2},\n        editorHandle,\n        ...others\n    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[0],\n            },\n        });\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\n    const hasError = !!error || hasMonacoError;\n    const theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));\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\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h=\"sm\" />;\n\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const _buttons = (\n        <Group justify=\"right\" gap=\"xs\">\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\n    }\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.root,\n                {[CodeEditorClasses.error]: hasError},\n                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs) as number,\n                    readOnly: disabled,\n                    stickyScroll: {enabled: false},\n                    tabSize,\n                }}\n                value={_value}\n                onChange={handleChange}\n                beforeMount={(monaco) => {\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                }}\n                onMount={(editor) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            gap=\"sm\"\n            h={Math.max(parentHeight, minHeight)}\n            mah={maxHeight}\n            ref={ref}\n            {...others}\n        >\n            <Group justify=\"space-between\">\n                {_header}\n                {_buttons}\n            </Group>\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","options","tabSize","editorHandle","others","useState","loaded","setLoaded","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","hasError","useMantineTheme","colorScheme","useMantineColorScheme","useEffect","handleValidate","markers","some","marker","severity","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","Space","h","_header","Stack","gap","_buttons","Group","justify","Search","CopyToClipboard","editorTheme","_editor","Box","p","pl","className","cx","CodeEditorClasses","root","data-testid","Editor","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","stickyScroll","beforeMount","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","Center","Loader","Math","max","mah"],"mappings":"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"}

package/dist/cjs/components/code-editor/CodeEditor.module.css

@@ -1,35 +1,36 @@
-.editor {
-    border: 1px solid var(--mantine-color-gray-3);
-    border-radius: var(--mantine-radius-default);
+.root {
+    --ce-bg: var(--mantine-color-gray-0);
+    --ce-border-color: var(--mantine-color-default-border);
+
+    border: 1px solid var(--ce-border-color);
+    border-radius: var(--mantine-radius-lg);
     z-index: 1;
     height: 100%;
-    outline-width: thin;
+    background-color: var(--ce-bg);
 
     @mixin light {
-        background-color: var(--mantine-color-white);
+        --ce-bg: var(--mantine-color-gray-0);
     }
 
     @mixin dark {
-        background-color: var(--mantine-color-black);
+        --ce-bg: var(--mantine-color-black);
     }
 }
 
-.valid {
-    outline-color: auto;
-    outline-style: none;
-}
-
 .error {
-    outline-color: var(--mantine-color-red-6);
-    outline-style: solid;
+    --ce-border-color: var(--mantine-color-error);
 }
 
 .disabled {
     @mixin light {
-        background-color: var(--mantine-color-gray-2);
-    }
+        --ce-bg: var(--mantine-color-gray-1);
+        --ce-border-color: var(--mantine-color-gray-1);
 
-    @mixin dark {
-        background-color: var(--mantine-color-navy-7);
+        :global {
+            .monaco-editor {
+                --vscode-editor-background: var(--ce-bg);
+                --vscode-editorGutter-background: var(--ce-bg);
+            }
+        }
     }
 }

package/dist/cjs/components/code-editor/search/Search.d.ts

@@ -1,5 +1,6 @@
+import { FunctionComponent } from 'react';
 export interface SearchProps {
     handleSearch: () => void;
 }
-export declare const Search: React.FunctionComponent<SearchProps>;
+export declare const Search: FunctionComponent<SearchProps>;
 //# sourceMappingURL=Search.d.ts.map

package/dist/cjs/components/code-editor/search/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/Search.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAQD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAiD,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/Search.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAQD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAAiD,CAAC"}

package/dist/cjs/components/code-editor/search/Search.js

@@ -13,15 +13,14 @@ var _object_destructuring_empty = require("@swc/helpers/_/_object_destructuring_
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
-var _core = require("@mantine/core");
+var _actionicon = require("../../action-icon");
 var SearchButton = function(param) {
     var handleSearch = param.handleSearch;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon.Quaternary, {
         onClick: handleSearch,
-        variant: "subtle",
-        color: "gray",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.SearchSize16Px, {
-            height: 16
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSearch, {
+            "aria-label": "Search",
+            size: 16
         })
     });
 };

package/dist/cjs/components/code-editor/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon onClick={handleSearch} variant=\"subtle\" color=\"gray\">\n        <SearchSize16Px height={16}></SearchSize16Px>\n    </ActionIcon>\n);\n\nexport const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["Search","SearchButton","handleSearch","ActionIcon","onClick","variant","color","SearchSize16Px","height","params"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;gCAbgB;oBACJ;AAMzB,IAAMC,eAAqD;QAAEC,qBAAAA;yBACzD,qBAACC,gBAAU;QAACC,SAASF;QAAcG,SAAQ;QAASC,OAAM;kBACtD,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIzB,IAAMR,SAA+C;QAAKS;yBAAY,qBAACR,mCAAiBQ"}
+{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {IconSearch} from '@coveord/plasma-react-icons';\nimport {FunctionComponent} from 'react';\nimport {ActionIcon} from '../../action-icon';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon.Quaternary onClick={handleSearch}>\n        <IconSearch aria-label=\"Search\" size={16} />\n    </ActionIcon.Quaternary>\n);\n\nexport const Search: FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["Search","SearchButton","handleSearch","ActionIcon","Quaternary","onClick","IconSearch","aria-label","size","params"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;gCAdY;0BAEA;AAMzB,IAAMC,eAA+C;QAAEC,qBAAAA;yBACnD,qBAACC,sBAAU,CAACC,UAAU;QAACC,SAASH;kBAC5B,cAAA,qBAACI,4BAAU;YAACC,cAAW;YAASC,MAAM;;;;AAIvC,IAAMR,SAAyC;QAAKS;yBAAY,qBAACR,mCAAiBQ"}

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

@@ -1,4 +1,4 @@
-import { BoxProps, Factory, MantineSpacing, StylesApiProps, __InputWrapperProps } from '@mantine/core';
+import { __InputWrapperProps, BoxProps, Factory, MantineSpacing, StylesApiProps } from '@mantine/core';
 import { ReorderPayload } from '@mantine/form/lib/types';
 import { ForwardedRef, ReactNode } from 'react';
 import { CustomComponentThemeExtend } from '../../utils';
@@ -28,8 +28,9 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
      *
      * @param originalItem The original item
+     * @param itemIndex The index of the original item
      */
-    getItemId?: (originalItem: T) => string;
+    getItemId?: (originalItem: T, itemIndex: number) => string;
     /**
      * Unused, has no effect
      */
@@ -109,7 +110,7 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      */
     required?: boolean;
 }
-export type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';
+export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';
 export type CollectionFactory = Factory<{
     props: CollectionProps<unknown>;
     ref: HTMLDivElement;

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

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,QAAQ,EACR,OAAO,EAGP,cAAc,EAEd,cAAc,EAEd,mBAAmB,EAGtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,0BAA0B,EAAW,MAAM,aAAa,CAAC;AAMjE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,mBAAmB,EAAE,QAAQ,EAAE,cAAc,CAAC,iBAAiB,CAAC;IACxG;;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;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;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,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;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,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CAAC;AAEpF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACtC,CAAC,CAAC;AAaH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAU,eAAe,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;KAAC;;eAhBpF,eAAe,CAAC,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CAkKrC,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,mBAAmB,EAEnB,QAAQ,EACR,OAAO,EAEP,cAAc,EAEd,cAAc,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,0BAA0B,EAAW,MAAM,aAAa,CAAC;AAMjE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,mBAAmB,EAAE,QAAQ,EAAE,cAAc,CAAC,iBAAiB,CAAC;IACxG;;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;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3D;;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,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;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,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;AAE9F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACtC,CAAC,CAAC;AAaH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAU,eAAe,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;KAAC;;eAhBpF,eAAe,CAAC,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CA4JrC,CAAC"}

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

@@ -30,7 +30,7 @@ var defaultProps = {
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
     readOnly: false,
-    gap: 'xs',
+    gap: 'md',
     required: false,
     getItemId: function(param) {
         var id = param.id;
@@ -104,7 +104,9 @@ var Collection = function(props) {
     var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
         children: error
     })) : null;
-    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
+        gap: "xxs",
+        pb: "xs",
         children: [
             _label,
             _description
@@ -113,7 +115,7 @@ var Collection = function(props) {
     var standardizedItems = value.map(function(item, index) {
         var _getItemId;
         return {
-            id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
+            id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item, index)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
             data: item
         };
     });
@@ -131,25 +133,17 @@ var Collection = function(props) {
     });
     var _allowAdd;
     var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
-    var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Group, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Tooltip, {
-            label: addDisabledTooltip,
-            disabled: addAllowed,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
-                    variant: "subtle",
-                    leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
-                        height: 16
-                    }),
-                    onClick: function() {
-                        var _value_length;
-                        return onInsertItem(newItem, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
-                    },
-                    disabled: !addAllowed,
-                    children: addLabel
-                })
-            })
-        })
+    var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button.Quaternary, {
+        leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconPlus, {
+            size: 16
+        }),
+        onClick: function() {
+            var _value_length;
+            return onInsertItem(newItem, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
+        },
+        disabled: !addAllowed,
+        disabledTooltip: addDisabledTooltip,
+        children: addLabel
     }) : null;
     var getIndex = function(id) {
         return standardizedItems.findIndex(function(item) {
@@ -188,14 +182,15 @@ var Collection = function(props) {
                 }, others, getStyles('root')), {
                     children: [
                         _header,
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
-                            gap: gap,
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, _object_spread_props._(_object_spread._({
+                            gap: gap
+                        }, getStyles('items')), {
                             children: [
                                 items,
                                 _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 {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    Box,\n    BoxProps,\n    Factory,\n    Group,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    Tooltip,\n    __InputWrapperProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\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     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\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     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: 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     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: 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 gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\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\nexport type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\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    readOnly: false,\n    gap: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...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            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = canEdit ? (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftSection={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    ) : null;\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap}>\n                            {items}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","props","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","canEdit","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftSection","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Stack","extend","identity"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {IconPlus} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    __InputWrapperProps,\n    Box,\n    BoxProps,\n    Factory,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\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     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     * @param itemIndex The index of the original item\n     */\n    getItemId?: (originalItem: T, itemIndex: number) => string;\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     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: 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     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: 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 gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\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\nexport type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\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    readOnly: false,\n    gap: 'md',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...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 gap=\"xxs\" pb=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = canEdit ? (\n        <Button.Quaternary\n            leftSection={<IconPlus size={16} />}\n            onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n            disabled={!addAllowed}\n            disabledTooltip={addDisabledTooltip}\n        >\n            {addLabel}\n        </Button.Quaternary>\n    ) : null;\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap} {...getStyles('items')}>\n                            {items}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","props","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","canEdit","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","Stack","pb","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Button","Quaternary","leftSection","IconPlus","size","onClick","disabledTooltip","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Box","extend","identity"],"mappings":"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"}

package/dist/cjs/components/collection/Collection.module.css

@@ -2,6 +2,13 @@
     position: relative;
 }
 
+.items {
+    background-color: var(--mantine-color-gray-light);
+    padding: var(--mantine-spacing-md);
+    border: 1px solid var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-default);
+}
+
 .item {
     align-items: baseline;
 

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAmED,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":"AAGA,OAAO,EAAQ,UAAU,EAAW,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAK3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAoHD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}