@coveord/plasma-mantine 48.14.0 → 48.14.2

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

@@ -116,7 +116,9 @@ var CodeEditor = function(props) {
         mt: "xs"
     }, errorProps), {
         children: error
-    })) : null;
+    })) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Space, {
+        h: "xs"
+    });
     var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Box, {
         children: [
             _label,

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    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    ) : null;\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","_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} 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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"}

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,EAIZ,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,CAkIzD,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;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"}

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

@@ -6,7 +6,7 @@ import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import _ts_generator from "@swc/helpers/src/_ts_generator.mjs";
 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, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
+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 { useEffect, useState } from "react";
@@ -103,7 +103,9 @@ export var CodeEditor = function(props) {
         mt: "xs"
     }, errorProps), {
         children: error
-    })) : null;
+    })) : /*#__PURE__*/ _jsx(Space, {
+        h: "xs"
+    });
     var _header = _label || _description ? /*#__PURE__*/ _jsxs(Box, {
         children: [
             _label,

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

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

package/package.json

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

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

@@ -11,6 +11,7 @@ import {
     InputWrapperBaseProps,
     Loader,
     Selectors,
+    Space,
     Stack,
     Tooltip,
     useComponentDefaultProps,
@@ -141,7 +142,9 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         <Input.Error mt="xs" {...errorProps}>
             {error}
         </Input.Error>
-    ) : null;
+    ) : (
+        <Space h="xs" />
+    );
 
     const _header =
         _label || _description ? (