@coveord/plasma-mantine 52.26.0 → 52.26.2

package/dist/cjs/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":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,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,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,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,CAoJzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,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,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,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,CAsJzD,CAAC"}

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

@@ -67,10 +67,6 @@ var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array._((0, _react1.useState)(false), 2), loaded = _useState[0], setLoaded = _useState[1];
-    var _useState1 = _sliced_to_array._((0, _react1.useState)(false), 2), containsError = _useState1[0], setContainsError = _useState1[1];
-    var _useStyles = useStyles({
-        error: containsError
-    }), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
         value: value,
         defaultValue: defaultValue,
@@ -120,6 +116,13 @@ var CodeEditor = function(props) {
             (_onSearch = onSearch) === null || _onSearch === void 0 ? void 0 : _onSearch();
         }
     };
+    var _useState1 = _sliced_to_array._((0, _react1.useState)(false), 2), hasMonacoError = _useState1[0], setHasMonacoError = _useState1[1];
+    var renderErrorOutline = !!error || hasMonacoError;
+    var _useStyles = useStyles({
+        error: renderErrorOutline
+    }, {
+        name: "CodeEditor"
+    }), classes = _useStyles.classes, theme = _useStyles.theme;
     (0, _react1.useEffect)(function() {
         if (monacoLoader === "local") {
             loadLocalMonaco();
@@ -128,7 +131,7 @@ var CodeEditor = function(props) {
         }
     }, []);
     var handleValidate = function(markers) {
-        setContainsError(markers.some(function(marker) {
+        setHasMonacoError(markers.some(function(marker) {
             return marker.severity === _react.loader.__getMonacoInstance().MarkerSeverity.Error;
         }));
     };
@@ -173,6 +176,7 @@ var CodeEditor = function(props) {
         p: "md",
         pl: "xs",
         className: classes.editor,
+        "data-testid": "editor-wrapper",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default, {
             onValidate: handleValidate,
             defaultLanguage: language,

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    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\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        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (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    /**\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        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        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [containsError, setContainsError] = useState(false);\n    const {classes, theme} = useStyles({error: containsError});\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    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 handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setContainsError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\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 {...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 position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\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            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","containsError","setContainsError","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\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        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (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    /**\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        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        ...others\n    } = useComponentDefaultProps('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    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 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 renderErrorOutline = !!error || hasMonacoError;\n    const {classes, theme} = useStyles({error: renderErrorOutline}, {name: 'CodeEditor'});\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(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\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 {...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 position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor} data-testid=\"editor-wrapper\">\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\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            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","renderErrorOutline","name","classes","useEffect","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","data-testid","Editor","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}

package/dist/cjs/components/table/table-loading/TableLoading.js

@@ -13,11 +13,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var TableLoading = function(props) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Skeleton, _object_spread_props._(_object_spread._({
-        style: {
-            display: "inline-block"
-        }
-    }, props), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Skeleton, _object_spread_props._(_object_spread._({}, props), {
         sx: !props.visible ? {
             borderRadius: 0
         } : undefined,

package/dist/cjs/components/table/table-loading/TableLoading.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-loading/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["TableLoading","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;;oBAHyB;AAG/B,IAAMA,eAAiD,SAACC;yBAC3D,qBAACC,cAAQ;QAACC,OAAO;YAACC,SAAS;QAAc;OAAOH;QAAOI,IAAI,CAACJ,MAAMK,OAAO,GAAG;YAACC,cAAc;QAAC,IAAIC;kBAC3FP,MAAMQ,QAAQ"}
+{"version":3,"sources":["../../../../../src/components/table/table-loading/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["TableLoading","props","Skeleton","sx","visible","borderRadius","undefined","children"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;;oBAHyB;AAG/B,IAAMA,eAAiD,SAACC;yBAC3D,qBAACC,cAAQ,8CAAKD;QAAOE,IAAI,CAACF,MAAMG,OAAO,GAAG;YAACC,cAAc;QAAC,IAAIC;kBACzDL,MAAMM,QAAQ"}

package/dist/esm/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":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,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,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,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,CAoJzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,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,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,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,CAsJzD,CAAC"}

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

@@ -56,10 +56,6 @@ export var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array(useState(false), 2), loaded = _useState[0], setLoaded = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), containsError = _useState1[0], setContainsError = _useState1[1];
-    var _useStyles = useStyles({
-        error: containsError
-    }), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array(useUncontrolled({
         value: value,
         defaultValue: defaultValue,
@@ -107,6 +103,13 @@ export var CodeEditor = function(props) {
             (_onSearch = onSearch) === null || _onSearch === void 0 ? void 0 : _onSearch();
         }
     };
+    var _useState1 = _sliced_to_array(useState(false), 2), hasMonacoError = _useState1[0], setHasMonacoError = _useState1[1];
+    var renderErrorOutline = !!error || hasMonacoError;
+    var _useStyles = useStyles({
+        error: renderErrorOutline
+    }, {
+        name: "CodeEditor"
+    }), classes = _useStyles.classes, theme = _useStyles.theme;
     useEffect(function() {
         if (monacoLoader === "local") {
             loadLocalMonaco();
@@ -115,7 +118,7 @@ export var CodeEditor = function(props) {
         }
     }, []);
     var handleValidate = function(markers) {
-        setContainsError(markers.some(function(marker) {
+        setHasMonacoError(markers.some(function(marker) {
             return marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error;
         }));
     };
@@ -160,6 +163,7 @@ export var CodeEditor = function(props) {
         p: "md",
         pl: "xs",
         className: classes.editor,
+        "data-testid": "editor-wrapper",
         children: /*#__PURE__*/ _jsx(Editor, {
             onValidate: handleValidate,
             defaultLanguage: language,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\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        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (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    /**\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        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        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [containsError, setContainsError] = useState(false);\n    const {classes, theme} = useStyles({error: containsError});\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    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 handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setContainsError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\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 {...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 position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\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            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useRef","useState","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","containsError","setContainsError","classes","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\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        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (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    /**\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        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        ...others\n    } = useComponentDefaultProps('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    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 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 renderErrorOutline = !!error || hasMonacoError;\n    const {classes, theme} = useStyles({error: renderErrorOutline}, {name: 'CodeEditor'});\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(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\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 {...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 position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor} data-testid=\"editor-wrapper\">\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\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            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useRef","useState","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","renderErrorOutline","name","classes","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","data-testid","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/table/table-loading/TableLoading.js

@@ -3,11 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from "@mantine/core";
 export var TableLoading = function(props) {
-    return /*#__PURE__*/ _jsx(Skeleton, _object_spread_props(_object_spread({
-        style: {
-            display: "inline-block"
-        }
-    }, props), {
+    return /*#__PURE__*/ _jsx(Skeleton, _object_spread_props(_object_spread({}, props), {
         sx: !props.visible ? {
             borderRadius: 0
         } : undefined,

package/dist/esm/components/table/table-loading/TableLoading.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-loading/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["Skeleton","TableLoading","props","style","display","sx","visible","borderRadius","undefined","children"],"mappings":";;;AAAA,SAAQA,QAAQ,QAAsB,gBAAgB;AAGtD,OAAO,IAAMC,eAAiD,SAACC;yBAC3D,KAACF;QAASG,OAAO;YAACC,SAAS;QAAc;OAAOF;QAAOG,IAAI,CAACH,MAAMI,OAAO,GAAG;YAACC,cAAc;QAAC,IAAIC;kBAC3FN,MAAMO,QAAQ;;EAErB"}
+{"version":3,"sources":["../../../../../src/components/table/table-loading/TableLoading.tsx"],"sourcesContent":["import {Skeleton, SkeletonProps} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport const TableLoading: FunctionComponent<SkeletonProps> = (props) => (\n    <Skeleton {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n"],"names":["Skeleton","TableLoading","props","sx","visible","borderRadius","undefined","children"],"mappings":";;;AAAA,SAAQA,QAAQ,QAAsB,gBAAgB;AAGtD,OAAO,IAAMC,eAAiD,SAACC;yBAC3D,KAACF,kDAAaE;QAAOC,IAAI,CAACD,MAAME,OAAO,GAAG;YAACC,cAAc;QAAC,IAAIC;kBACzDJ,MAAMK,QAAQ;;EAErB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.26.0",
+  "version": "52.26.2",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,7 +41,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-react-icons": "52.23.1",
+    "@coveord/plasma-react-icons": "52.26.1",
     "@coveord/plasma-tokens": "52.23.1"
   },
   "devDependencies": {

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

@@ -113,8 +113,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
-    const [containsError, setContainsError] = useState(false);
-    const {classes, theme} = useStyles({error: containsError});
     const [_value, handleChange] = useUncontrolled<string>({
         value,
         defaultValue,
@@ -143,6 +141,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     };
 
+    const [hasMonacoError, setHasMonacoError] = useState(false);
+    const renderErrorOutline = !!error || hasMonacoError;
+    const {classes, theme} = useStyles({error: renderErrorOutline}, {name: 'CodeEditor'});
+
     useEffect(() => {
         if (monacoLoader === 'local') {
             loadLocalMonaco();
@@ -152,7 +154,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     }, []);
 
     const handleValidate = (markers: monacoEditor.IMarker[]) => {
-        setContainsError(
+        setHasMonacoError(
             markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
         );
     };
@@ -191,7 +193,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     );
 
     const _editor = loaded ? (
-        <Box p="md" pl="xs" className={classes.editor}>
+        <Box p="md" pl="xs" className={classes.editor} data-testid="editor-wrapper">
             <Editor
                 onValidate={handleValidate}
                 defaultLanguage={language}

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

@@ -41,6 +41,7 @@ describe('CodeEditor', () => {
         await waitForElementToBeRemoved(screen.queryByRole('presentation'));
 
         expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
+        expect(screen.getByTestId('editor-wrapper')).toHaveStyle('outline-color: #cd2113');
     });
 
     it('loads the monaco editor files from node_modules when monacoLoader prop is "local"', async () => {
@@ -79,6 +80,7 @@ describe('CodeEditor', () => {
 
         expect(onCopySpy).toHaveBeenCalledTimes(1);
     });
+
     it('calls the onSearch callback when clicking on the search button', async () => {
         const user = userEvent.setup();
         const onSearchSpy = vi.fn();

package/src/components/table/table-loading/TableLoading.tsx

@@ -2,7 +2,7 @@ import {Skeleton, SkeletonProps} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
 export const TableLoading: FunctionComponent<SkeletonProps> = (props) => (
-    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>
+    <Skeleton {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>
         {props.children}
     </Skeleton>
 );