@coveord/plasma-mantine 52.7.0 → 52.8.0

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;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAM7D,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAiIzD,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;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyIzD,CAAC"}

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

@@ -23,6 +23,7 @@ var _react1 = require("react");
 var _hooks1 = require("../../hooks");
 var _xml = require("./languages/xml");
 var _copyToClipboard = require("../copyToClipboard");
+var _search = require("./search");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {},
@@ -68,6 +69,7 @@ var CodeEditor = function(props) {
         finalValue: ""
     }), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
     var _useParentHeight = _sliced_to_array._((0, _hooks1.useParentHeight)(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
+    var editorRef = (0, _react1.useRef)(null);
     var loadLocalMonaco = function() {
         var _ref = _async_to_generator._(function() {
             var monacoInstance;
@@ -101,6 +103,10 @@ var CodeEditor = function(props) {
             _xml.XML.register(monaco);
         }
     };
+    var handleSearch = function() {
+        editorRef.current.focus();
+        editorRef.current.trigger("editor", "actions.find", "");
+    };
     (0, _react1.useEffect)(function() {
         if (monacoLoader === "local") {
             loadLocalMonaco();
@@ -129,11 +135,17 @@ var CodeEditor = function(props) {
             _description
         ]
     }) : null;
-    var _copyButton = /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
+    var _buttons = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
         position: "right",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_copyToClipboard.CopyToClipboard, {
-            value: _value
-        })
+        spacing: 0,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_search.Search, {
+                handleSearch: handleSearch
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_copyToClipboard.CopyToClipboard, {
+                value: _value
+            })
+        ]
     });
     var _editor = loaded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
         p: "md",
@@ -157,6 +169,7 @@ var CodeEditor = function(props) {
             value: _value,
             onChange: handleChange,
             onMount: function(editor, monaco) {
+                editorRef.current = editor;
                 registerLanguages(monaco);
                 editor.onDidFocusEditorText(onFocus);
                 editor.onDidBlurEditorText(/*#__PURE__*/ _async_to_generator._(function() {
@@ -193,7 +206,7 @@ var CodeEditor = function(props) {
     }, others), {
         children: [
             _header,
-            _copyButton,
+            _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    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, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\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 {...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 _copyButton = (\n        <Group position=\"right\">\n            <CopyToClipboard value={_value} />\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: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\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            {_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","monacoInstance","loader","config","monaco","registerLanguages","XML","register","useEffect","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_copyButton","Group","position","CopyToClipboard","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","px","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 {\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, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} 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) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\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 handleSearch = () => {\n        editorRef.current.focus();\n        editorRef.current.trigger('editor', 'actions.find', '');\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 {...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} />\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: 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","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","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","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/code-editor/search/Search.d.ts

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Search", {
+    enumerable: true,
+    get: function() {
+        return Search;
+    }
+});
+var _extends = require("@swc/helpers/_/_extends");
+var _object_destructuring_empty = require("@swc/helpers/_/_object_destructuring_empty");
+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 SearchButton = function(param) {
+    var handleSearch = param.handleSearch;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
+        onClick: handleSearch,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.SearchSize16Px, {
+            height: 16
+        })
+    });
+};
+var Search = function(_param) /*#__PURE__*/ {
+    var params = _extends._({}, _object_destructuring_empty._(_param));
+    return (0, _jsxruntime.jsx)(SearchButton, _object_spread._({}, params));
+};
+
+//# sourceMappingURL=Search.js.map

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

@@ -0,0 +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}>\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","SearchSize16Px","height","params"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;gCAbgB;oBACJ;AAMzB,IAAMC,eAAqD;QAAEC,qBAAAA;yBACzD,qBAACC;QAAWC,SAASF;kBACjB,cAAA,qBAACG;YAAeC,QAAQ;;;;AAIzB,IAAMN,SAA+C;QAAKO;WAAY,qBAACN,mCAAiBM;AAAS"}

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

@@ -0,0 +1,2 @@
+export * from './Search';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Search"), exports);
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/search/index.ts"],"sourcesContent":["export * from './Search';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/dist/cjs/components/table/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Table';
 export { useTable } from './TableContext';
-export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps } from './Table.types';
-export { TableLayouts } from './layouts/TableLayouts';
+export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps, type TableLayout, type TableLayoutProps, } from './Table.types';
+export { flexRender as renderTableCell } from '@tanstack/react-table';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAChH,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EACH,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC"}

package/dist/cjs/components/table/index.js

@@ -12,13 +12,13 @@ _export(exports, {
     useTable: function() {
         return _TableContext.useTable;
     },
-    TableLayouts: function() {
-        return _TableLayouts.TableLayouts;
+    renderTableCell: function() {
+        return _reacttable.flexRender;
     }
 });
 var _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./Table"), exports);
 var _TableContext = require("./TableContext");
-var _TableLayouts = require("./layouts/TableLayouts");
+var _reacttable = require("@tanstack/react-table");
 
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\nexport {TableLayouts} from './layouts/TableLayouts';\n"],"names":["useTable","TableLayouts"],"mappings":";;;;;;;;;;;IACQA,QAAQ;eAARA;;IAEAC,YAAY;eAAZA;;;;uBAHM;4BACS;4BAEI"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {\n    type onTableChangeEvent,\n    type InitialTableState,\n    type TableState,\n    type TableProps,\n    type TableLayout,\n    type TableLayoutProps,\n} from './Table.types';\nexport {flexRender as renderTableCell} from '@tanstack/react-table';\n"],"names":["useTable","renderTableCell","flexRender"],"mappings":";;;;;;;;;;;IACQA,QAAQ;eAARA;;IAScC,eAAe;eAA7BC;;;;uBAVM;4BACS;0BASqB"}

package/dist/cjs/components/table/layouts/TableLayouts.d.ts

@@ -1,4 +1,4 @@
 export declare const TableLayouts: {
-    Rows: import("../Table.types").TableLayout;
+    Rows: import("..").TableLayout;
 };
 //# sourceMappingURL=TableLayouts.d.ts.map

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;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAM7D,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAiIzD,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;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyIzD,CAAC"}

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

@@ -8,10 +8,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, createStyles, Group, Input, Loader, px, Space, Stack, useComponentDefaultProps } from "@mantine/core";
 import { useUncontrolled } from "@mantine/hooks";
 import Editor, { loader } from "@monaco-editor/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useParentHeight } from "../../hooks";
 import { XML } from "./languages/xml";
 import { CopyToClipboard } from "../copyToClipboard";
+import { Search } from "./search";
 var useStyles = createStyles(function(theme) {
     return {
         root: {},
@@ -57,6 +58,7 @@ export var CodeEditor = function(props) {
         finalValue: ""
     }), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
     var _useParentHeight = _sliced_to_array(useParentHeight(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
+    var editorRef = useRef(null);
     var loadLocalMonaco = function() {
         var _ref = _async_to_generator(function() {
             var monacoInstance;
@@ -88,6 +90,10 @@ export var CodeEditor = function(props) {
             XML.register(monaco);
         }
     };
+    var handleSearch = function() {
+        editorRef.current.focus();
+        editorRef.current.trigger("editor", "actions.find", "");
+    };
     useEffect(function() {
         if (monacoLoader === "local") {
             loadLocalMonaco();
@@ -116,11 +122,17 @@ export var CodeEditor = function(props) {
             _description
         ]
     }) : null;
-    var _copyButton = /*#__PURE__*/ _jsx(Group, {
+    var _buttons = /*#__PURE__*/ _jsxs(Group, {
         position: "right",
-        children: /*#__PURE__*/ _jsx(CopyToClipboard, {
-            value: _value
-        })
+        spacing: 0,
+        children: [
+            /*#__PURE__*/ _jsx(Search, {
+                handleSearch: handleSearch
+            }),
+            /*#__PURE__*/ _jsx(CopyToClipboard, {
+                value: _value
+            })
+        ]
     });
     var _editor = loaded ? /*#__PURE__*/ _jsx(Box, {
         p: "md",
@@ -144,6 +156,7 @@ export var CodeEditor = function(props) {
             value: _value,
             onChange: handleChange,
             onMount: function(editor, monaco) {
+                editorRef.current = editor;
                 registerLanguages(monaco);
                 editor.onDidFocusEditorText(onFocus);
                 editor.onDidBlurEditorText(/*#__PURE__*/ _async_to_generator(function() {
@@ -180,7 +193,7 @@ export var CodeEditor = function(props) {
     }, others), {
         children: [
             _header,
-            _copyButton,
+            _buttons,
             _editor,
             _error
         ]

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, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\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 {...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 _copyButton = (\n        <Group position=\"right\">\n            <CopyToClipboard value={_value} />\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: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\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            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useParentHeight","XML","CopyToClipboard","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","monacoInstance","config","monaco","registerLanguages","register","_label","Label","_description","Description","_error","Error","mt","h","_header","_copyButton","position","_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 {\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, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} 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) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\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 handleSearch = () => {\n        editorRef.current.focus();\n        editorRef.current.trigger('editor', 'actions.find', '');\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 {...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} />\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: 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","useState","useRef","useParentHeight","XML","CopyToClipboard","Search","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","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","_label","Label","_description","Description","_error","Error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","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/code-editor/search/Search.d.ts

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,21 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchSize16Px } from "@coveord/plasma-react-icons";
+import { ActionIcon } from "@mantine/core";
+var SearchButton = function(param) {
+    var handleSearch = param.handleSearch;
+    return /*#__PURE__*/ _jsx(ActionIcon, {
+        onClick: handleSearch,
+        children: /*#__PURE__*/ _jsx(SearchSize16Px, {
+            height: 16
+        })
+    });
+};
+export var Search = function(_param) /*#__PURE__*/ {
+    var params = _extends({}, _object_destructuring_empty(_param));
+    return _jsx(SearchButton, _object_spread({}, params));
+};
+
+//# sourceMappingURL=Search.js.map

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

@@ -0,0 +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}>\n        <SearchSize16Px height={16}></SearchSize16Px>\n    </ActionIcon>\n);\n\nexport const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["SearchSize16Px","ActionIcon","SearchButton","handleSearch","onClick","height","Search","params"],"mappings":";;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,UAAU,QAAO,gBAAgB;AAMzC,IAAMC,eAAqD;QAAEC,qBAAAA;yBACzD,KAACF;QAAWG,SAASD;kBACjB,cAAA,KAACH;YAAeK,QAAQ;;;;AAIhC,OAAO,IAAMC,SAA+C;QAAKC;WAAY,KAACL,iCAAiBK;AAAS,EAAE"}

package/dist/esm/components/code-editor/search/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Search';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/code-editor/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/search/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/esm/components/code-editor/search/index.js

@@ -0,0 +1,3 @@
+export * from "./Search";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/code-editor/search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/search/index.ts"],"sourcesContent":["export * from './Search';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}

package/dist/esm/components/table/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Table';
 export { useTable } from './TableContext';
-export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps } from './Table.types';
-export { TableLayouts } from './layouts/TableLayouts';
+export { type onTableChangeEvent, type InitialTableState, type TableState, type TableProps, type TableLayout, type TableLayoutProps, } from './Table.types';
+export { flexRender as renderTableCell } from '@tanstack/react-table';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAChH,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EACH,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC"}

package/dist/esm/components/table/index.js

@@ -1,5 +1,5 @@
 export * from "./Table";
 export { useTable } from "./TableContext";
-export { TableLayouts } from "./layouts/TableLayouts";
+export { flexRender as renderTableCell } from "@tanstack/react-table";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/components/table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\nexport {TableLayouts} from './layouts/TableLayouts';\n"],"names":["useTable","TableLayouts"],"mappings":"AAAA,cAAc,UAAU;AACxB,SAAQA,QAAQ,QAAO,iBAAiB;AAExC,SAAQC,YAAY,QAAO,yBAAyB"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {\n    type onTableChangeEvent,\n    type InitialTableState,\n    type TableState,\n    type TableProps,\n    type TableLayout,\n    type TableLayoutProps,\n} from './Table.types';\nexport {flexRender as renderTableCell} from '@tanstack/react-table';\n"],"names":["useTable","flexRender","renderTableCell"],"mappings":"AAAA,cAAc,UAAU;AACxB,SAAQA,QAAQ,QAAO,iBAAiB;AASxC,SAAQC,cAAcC,eAAe,QAAO,wBAAwB"}

package/dist/esm/components/table/layouts/TableLayouts.d.ts

@@ -1,4 +1,4 @@
 export declare const TableLayouts: {
-    Rows: import("../Table.types").TableLayout;
+    Rows: import("..").TableLayout;
 };
 //# sourceMappingURL=TableLayouts.d.ts.map

package/package.json

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

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

@@ -15,11 +15,12 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {loader, Monaco} from '@monaco-editor/react';
-import {FunctionComponent, useEffect, useState} from 'react';
+import {FunctionComponent, useEffect, useState, useRef} from 'react';
 
 import {useParentHeight} from '../../hooks';
 import {XML} from './languages/xml';
 import {CopyToClipboard} from '../copyToClipboard';
+import {Search} from './search';
 
 const useStyles = createStyles((theme) => ({
     root: {},
@@ -110,6 +111,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         finalValue: '',
     });
     const [parentHeight, ref] = useParentHeight();
+    const editorRef = useRef(null);
 
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
@@ -123,6 +125,11 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     };
 
+    const handleSearch = () => {
+        editorRef.current.focus();
+        editorRef.current.trigger('editor', 'actions.find', '');
+    };
+
     useEffect(() => {
         if (monacoLoader === 'local') {
             loadLocalMonaco();
@@ -157,8 +164,9 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
             </Box>
         ) : null;
 
-    const _copyButton = (
-        <Group position="right">
+    const _buttons = (
+        <Group position="right" spacing={0}>
+            <Search handleSearch={handleSearch} />
             <CopyToClipboard value={_value} />
         </Group>
     );
@@ -181,6 +189,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 value={_value}
                 onChange={handleChange}
                 onMount={(editor, monaco) => {
+                    editorRef.current = editor;
                     registerLanguages(monaco);
                     editor.onDidFocusEditorText(onFocus);
                     editor.onDidBlurEditorText(async () => {
@@ -205,7 +214,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
             {...others}
         >
             {_header}
-            {_copyButton}
+            {_buttons}
             {_editor}
             {_error}
         </Stack>

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

@@ -1,5 +1,5 @@
 import {loader} from '@monaco-editor/react';
-import {render, screen, waitForElementToBeRemoved} from '@test-utils';
+import {render, screen, userEvent, waitForElementToBeRemoved} from '@test-utils';
 import {useForm} from '../../../form';
 
 import {CodeEditor} from '../CodeEditor';
@@ -13,7 +13,7 @@ describe('CodeEditor', () => {
         vi.clearAllMocks();
     });
 
-    it('renders the monaco editor and a copy to clipboard button', async () => {
+    it('renders the monaco editor, a copy to clipboard button and a search button', async () => {
         render(<CodeEditor label="label" description="description" />);
 
         await waitForElementToBeRemoved(screen.queryByRole('presentation'));
@@ -22,6 +22,7 @@ describe('CodeEditor', () => {
         expect(screen.getByText(/description/)).toBeInTheDocument();
         expect(await screen.findByTestId('monaco-editor')).toBeInTheDocument();
         expect(await screen.findByRole('button', {name: /copy/i})).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: /search/i})).toBeInTheDocument();
     });
 
     it('shows validation errors underneath the code editor', async () => {
@@ -60,4 +61,12 @@ describe('CodeEditor', () => {
         render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
         expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);
     });
+
+    it('focus and triggers search on the Monaco editor when handleSearch is called', async () => {
+        const user = userEvent.setup();
+        render(<CodeEditor />);
+        await user.click(screen.getByRole('button', {name: /search/i}));
+        expect(screen.getByTestId('monaco-editor')).toHaveAttribute('focus');
+        expect(screen.getByTestId('monaco-editor')).toHaveAttribute('trigger');
+    });
 });

package/src/components/code-editor/search/Search.tsx

@@ -0,0 +1,14 @@
+import {SearchSize16Px} from '@coveord/plasma-react-icons';
+import {ActionIcon} from '@mantine/core';
+
+export interface SearchProps {
+    handleSearch: () => void;
+}
+
+const SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (
+    <ActionIcon onClick={handleSearch}>
+        <SearchSize16Px height={16}></SearchSize16Px>
+    </ActionIcon>
+);
+
+export const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;