@coveord/plasma-mantine 52.27.3 → 53.0.0

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "CodeEditor", {
     }
 });
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
@@ -20,25 +22,12 @@ var _core = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("@monaco-editor/react"));
 var _react1 = require("react");
+var _clsx = /*#__PURE__*/ _interop_require_default._(require("clsx"));
 var _hooks1 = require("../../hooks");
-var _xml = require("./languages/xml");
 var _copyToClipboard = require("../copyToClipboard");
+var _CodeEditormodulecss = /*#__PURE__*/ _interop_require_default._(require("./CodeEditor.module.css"));
+var _xml = require("./languages/xml");
 var _search = require("./search");
-var useStyles = (0, _core.createStyles)(function(theme, param) {
-    var error = param.error;
-    return {
-        root: {},
-        editor: {
-            border: "1px solid ".concat(theme.colors.gray[2]),
-            borderRadius: theme.defaultRadius,
-            backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
-            height: "100%",
-            outlineColor: error ? theme.colors.red[6] : null,
-            outlineStyle: error ? "solid" : "none",
-            outlineWidth: "thin"
-        }
-    };
-});
 var defaultProps = {
     language: "plaintext",
     monacoLoader: "local",
@@ -46,7 +35,7 @@ var defaultProps = {
     minHeight: 300
 };
 var CodeEditor = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("CodeEditor", defaultProps, props), language = _useComponentDefaultProps.language, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onCopy = _useComponentDefaultProps.onCopy, onSearch = _useComponentDefaultProps.onSearch, onFocus = _useComponentDefaultProps.onFocus, value = _useComponentDefaultProps.value, label = _useComponentDefaultProps.label, required = _useComponentDefaultProps.required, labelProps = _useComponentDefaultProps.labelProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, minHeight = _useComponentDefaultProps.minHeight, maxHeight = _useComponentDefaultProps.maxHeight, disabled = _useComponentDefaultProps.disabled, monacoLoader = _useComponentDefaultProps.monacoLoader, others = _object_without_properties._(_useComponentDefaultProps, [
+    var _useProps = (0, _core.useProps)("CodeEditor", defaultProps, props), language = _useProps.language, defaultValue = _useProps.defaultValue, onChange = _useProps.onChange, onCopy = _useProps.onCopy, onSearch = _useProps.onSearch, onFocus = _useProps.onFocus, value = _useProps.value, label = _useProps.label, required = _useProps.required, labelProps = _useProps.labelProps, error = _useProps.error, errorProps = _useProps.errorProps, description = _useProps.description, descriptionProps = _useProps.descriptionProps, minHeight = _useProps.minHeight, maxHeight = _useProps.maxHeight, disabled = _useProps.disabled, monacoLoader = _useProps.monacoLoader, others = _object_without_properties._(_useProps, [
         "language",
         "defaultValue",
         "onChange",
@@ -118,11 +107,8 @@ var CodeEditor = function(props) {
     };
     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;
+    var theme = (0, _core.useMantineTheme)();
+    var colorScheme = (0, _core.useMantineColorScheme)().colorScheme;
     (0, _react1.useEffect)(function() {
         if (monacoLoader === "local") {
             loadLocalMonaco();
@@ -157,8 +143,8 @@ var CodeEditor = function(props) {
         ]
     }) : null;
     var _buttons = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
-        position: "right",
-        spacing: 0,
+        justify: "right",
+        gap: 0,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_search.Search, {
                 handleSearch: handleSearch
@@ -175,12 +161,12 @@ var CodeEditor = function(props) {
     var _editor = loaded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
         p: "md",
         pl: "xs",
-        className: classes.editor,
+        className: (0, _clsx.default)(_CodeEditormodulecss.default.editor, _define_property._({}, _CodeEditormodulecss.default.valid, !renderErrorOutline), _define_property._({}, _CodeEditormodulecss.default.error, renderErrorOutline)),
         "data-testid": "editor-wrapper",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default, {
             onValidate: handleValidate,
             defaultLanguage: language,
-            theme: theme.colorScheme === "light" ? "light" : "vs-dark",
+            theme: colorScheme === "light" ? "light" : "vs-dark",
             options: {
                 minimap: {
                     enabled: false
@@ -220,14 +206,13 @@ var CodeEditor = function(props) {
             }
         })
     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
-        className: classes.editor,
+        className: _CodeEditormodulecss.default.editor,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Loader, {})
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, _object_spread_props._(_object_spread._({
         justify: "flex-start",
-        className: classes.root,
-        spacing: 0,
-        sx: {
+        gap: 0,
+        style: {
             height: Math.max(parentHeight, minHeight),
             maxHeight: maxHeight
         },

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 [_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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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml';\nimport {Search} from './search';\ninterface CodeEditorProps\n    extends Omit<\n            InputWrapperProps,\n            'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'\n        >,\n        Omit<StackProps, 'onChange'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\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    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n    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 theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(\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 justify=\"right\" gap={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.editor,\n                {[CodeEditorClasses.valid]: !renderErrorOutline},\n                {[CodeEditorClasses.error]: renderErrorOutline},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                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) as number,\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={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            gap={0}\n            style={{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","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","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","theme","useMantineTheme","colorScheme","useMantineColorScheme","useEffect","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","mt","Space","h","_header","Box","_buttons","Group","justify","gap","Search","CopyToClipboard","_editor","p","pl","className","cx","CodeEditorClasses","editor","valid","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","style","height","Math","max"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+.editor {
+    border: 1px solid var(--mantine-color-gray-3);
+    border-radius: var(--mantine-radius-default);
+    z-index: 1;
+    height: 100%;
+    outline-width: thin;
+
+    @mixin light {
+        background-color: var(--mantine-color-white);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-black);
+    }
+}
+
+.valid {
+    outline-color: auto;
+    outline-style: none;
+}
+
+.error {
+    outline-color: var(--mantine-color-red-6);
+    outline-style: solid;
+}

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

@@ -18,6 +18,8 @@ var SearchButton = function(param) {
     var handleSearch = param.handleSearch;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
         onClick: handleSearch,
+        variant: "subtle",
+        color: "gray",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.SearchSize16Px, {
             height: 16
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon onClick={handleSearch}>\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,gBAAU;QAACC,SAASF;kBACjB,cAAA,qBAACG,gCAAc;YAACC,QAAQ;;;;AAIzB,IAAMN,SAA+C;QAAKO;WAAY,qBAACN,mCAAiBM;AAAS"}
+{"version":3,"sources":["../../../../../src/components/code-editor/search/Search.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\n\nexport interface SearchProps {\n    handleSearch: () => void;\n}\n\nconst SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (\n    <ActionIcon onClick={handleSearch} variant=\"subtle\" color=\"gray\">\n        <SearchSize16Px height={16}></SearchSize16Px>\n    </ActionIcon>\n);\n\nexport const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;\n"],"names":["Search","SearchButton","handleSearch","ActionIcon","onClick","variant","color","SearchSize16Px","height","params"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;gCAbgB;oBACJ;AAMzB,IAAMC,eAAqD;QAAEC,qBAAAA;yBACzD,qBAACC,gBAAU;QAACC,SAASF;QAAcG,SAAQ;QAASC,OAAM;kBACtD,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIzB,IAAMR,SAA+C;QAAKS;WAAY,qBAACR,mCAAiBQ;AAAS"}

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

@@ -1,8 +1,8 @@
-import { DefaultProps, InputWrapperBaseProps, MantineNumberSize, Selectors } from '@mantine/core';
+import { BoxProps, Factory, MantineSpacing, StylesApiProps, __InputWrapperProps } from '@mantine/core';
 import { ReorderPayload } from '@mantine/form/lib/types';
-import { ReactNode } from 'react';
-import useStyles from './Collection.styles';
-interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
+import { ForwardedRef, ReactNode } from 'react';
+import { CustomComponentThemeExtend } from '../../utils';
+export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
     /**
      * The default value each new item should have
      */
@@ -55,7 +55,7 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
     /**
      * Function that gets called when a new item needs to be added to the collection
      *
-     * @param value The the value of the item to insert
+     * @param value The value of the item to insert
      * @param index The index of the new item to insert
      */
     onInsertItem?: (value: T, index: number) => void;
@@ -91,11 +91,11 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      */
     addDisabledTooltip?: string;
     /**
-     * The spacing between the colleciton items
+     * The gap between the colleciton items
      *
      * @default 'xs'
      */
-    spacing?: MantineNumberSize;
+    gap?: MantineSpacing;
     /**
      * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
      *
@@ -103,6 +103,20 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      */
     required?: boolean;
 }
-export declare const Collection: <T>(props: CollectionProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';
+export type CollectionFactory = Factory<{
+    props: CollectionProps<unknown>;
+    ref: HTMLDivElement;
+    stylesNames: CollectionStylesNames;
+}>;
+export declare const Collection: {
+    <T>(props: CollectionProps<T> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    extend: CustomComponentThemeExtend<{
+        props: CollectionProps<unknown>;
+        ref: HTMLDivElement;
+        stylesNames: CollectionStylesNames;
+    }>;
+};
 //# sourceMappingURL=Collection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,2EAsItB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,QAAQ,EACR,OAAO,EAGP,cAAc,EAEd,cAAc,EAEd,mBAAmB,EAGtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,0BAA0B,EAAW,MAAM,aAAa,CAAC;AAMjE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,mBAAmB,EAAE,QAAQ,EAAE,cAAc,CAAC,iBAAiB,CAAC;IACxG;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,YAAY,CAAC;AAEpF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACtC,CAAC,CAAC;AAYH,eAAO,MAAM,UAAU;;cAA2C,aAAa,cAAc,CAAC;;;eAfnF,gBAAgB,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CA+JrC,CAAC"}

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

@@ -19,15 +19,17 @@ var _modifiers = require("@dnd-kit/modifiers");
 var _sortable = require("@dnd-kit/sortable");
 var _core1 = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
+var _utils = require("../../utils");
 var _button = require("../button");
-var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
+var _Collectionmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Collection.module.css"));
+var _CollectionContext = require("./CollectionContext");
 var _CollectionItem = require("./CollectionItem");
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
     addDisabledTooltip: "There is already an empty item",
     disabled: false,
-    spacing: "xs",
+    gap: "xs",
     required: false,
     getItemId: function(param) {
         var id = param.id;
@@ -36,8 +38,8 @@ var defaultProps = {
 };
 var Collection = function(props) {
     var _allowAdd;
-    var _useComponentDefaultProps = (0, _core1.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
-    classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties._(_useComponentDefaultProps, [
+    var _useProps = (0, _core1.useProps)("Collection", defaultProps, props), value = _useProps.value, onChange = _useProps.onChange, onRemoveItem = _useProps.onRemoveItem, onReorderItem = _useProps.onReorderItem, onInsertItem = _useProps.onInsertItem, disabled = _useProps.disabled, draggable = _useProps.draggable, children = _useProps.children, gap = _useProps.gap, required = _useProps.required, newItem = _useProps.newItem, addLabel = _useProps.addLabel, addDisabledTooltip = _useProps.addDisabledTooltip, allowAdd = _useProps.allowAdd, label = _useProps.label, labelProps = _useProps.labelProps, withAsterisk = _useProps.withAsterisk, description = _useProps.description, descriptionProps = _useProps.descriptionProps, error = _useProps.error, errorProps = _useProps.errorProps, getItemId = _useProps.getItemId, ref = _useProps.ref, // Style props
+    style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, others = _object_without_properties._(_useProps, [
         "value",
         "onChange",
         "onRemoveItem",
@@ -46,7 +48,7 @@ var Collection = function(props) {
         "disabled",
         "draggable",
         "children",
-        "spacing",
+        "gap",
         "required",
         "newItem",
         "addLabel",
@@ -60,17 +62,23 @@ var Collection = function(props) {
         "error",
         "errorProps",
         "getItemId",
-        "classNames",
+        "ref",
+        "style",
         "className",
+        "classNames",
         "styles",
         "unstyled"
     ]);
-    var _useStyles = (0, _Collectionstyles.default)(null, {
-        classNames: classNames,
+    var getStyles = (0, _core1.useStyles)({
         name: "Collection",
+        classes: _Collectionmodulecss.default,
+        props: props,
+        className: className,
+        style: style,
+        classNames: classNames,
         styles: styles,
         unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    });
     var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
         coordinateGetter: _sortable.sortableKeyboardCoordinates
     }));
@@ -118,7 +126,6 @@ var Collection = function(props) {
                 var _onRemoveItem;
                 return (_onRemoveItem = onRemoveItem) === null || _onRemoveItem === void 0 ? void 0 : _onRemoveItem(index);
             },
-            styles: styles,
             removable: !(required && hasOnlyOneItem),
             children: children(item.data, index)
         }, item.id);
@@ -133,7 +140,7 @@ var Collection = function(props) {
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
                     variant: "subtle",
-                    leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
+                    leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
                         height: 16
                     }),
                     onClick: function() {
@@ -165,33 +172,39 @@ var Collection = function(props) {
             }
         }
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
-        onDragEnd: handleDragEnd,
-        sensors: sensors,
-        modifiers: [
-            _modifiers.restrictToVerticalAxis,
-            _modifiers.restrictToParentElement
-        ],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
-            items: standardizedItems,
-            strategy: _sortable.verticalListSortingStrategy,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
-                className: cx(classes.root, className)
-            }, others), {
-                children: [
-                    _header,
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
-                        spacing: spacing,
-                        children: [
-                            items,
-                            _addButton,
-                            _error
-                        ]
-                    })
-                ]
-            }))
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionContext.CollectionProvider, {
+        value: {
+            getStyles: getStyles
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
+            onDragEnd: handleDragEnd,
+            sensors: sensors,
+            modifiers: [
+                _modifiers.restrictToVerticalAxis,
+                _modifiers.restrictToParentElement
+            ],
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
+                items: standardizedItems,
+                strategy: _sortable.verticalListSortingStrategy,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
+                    ref: ref
+                }, others, getStyles("root")), {
+                    children: [
+                        _header,
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
+                            gap: gap,
+                            children: [
+                                items,
+                                _addButton,
+                                _error
+                            ]
+                        })
+                    ]
+                }))
+            })
         })
     });
 };
+Collection.extend = _utils.identity;
 
 //# sourceMappingURL=Collection.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={disabled}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <DndContext\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n        >\n            <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                <Box className={cx(classes.root, className)} {...others}>\n                    {_header}\n                    <Stack spacing={spacing}>\n                        {items}\n                        {_addButton}\n                        {_error}\n                    </Stack>\n                </Box>\n            </SortableContext>\n        </DndContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","props","allowAdd","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","root","Stack"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    Box,\n    BoxProps,\n    Factory,\n    Group,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    Tooltip,\n    __InputWrapperProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    gap: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={disabled}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftSection={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap}>\n                            {items}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","gap","required","getItemId","id","props","allowAdd","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftSection","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Stack","extend","identity"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+.root {
+    position: relative;
+}
+.item {
+    align-items: baseline;
+    &[data-isdragging='true'] {
+        box-shadow: var(--mantine-shadow-md);
+        z-index: 2;
+    }
+}
+
+.dragHandle {
+    cursor: move;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type GetStylesApi } from '@mantine/core';
+import type { CollectionFactory } from './Collection';
+interface CollectionContextType {
+    getStyles: GetStylesApi<CollectionFactory>;
+}
+export declare const CollectionProvider: ({ children, value }: {
+    value: CollectionContextType;
+    children: import("react").ReactNode;
+}) => import("react").JSX.Element, useCollectionContext: () => CollectionContextType;
+export {};
+//# sourceMappingURL=CollectionContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAoB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAEpD,UAAU,qBAAqB;IAC3B,SAAS,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;CAC9C;AAED,eAAO,MAAO,kBAAkB;;;mCAAE,oBAAoB,6BAErD,CAAC"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CollectionProvider: function() {
+        return CollectionProvider;
+    },
+    useCollectionContext: function() {
+        return useCollectionContext;
+    }
+});
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _core = require("@mantine/core");
+var _createSafeContext = _sliced_to_array._((0, _core.createSafeContext)("Collection component was not found in tree"), 2);
+var CollectionProvider = _createSafeContext[0], useCollectionContext = _createSafeContext[1];
+
+//# sourceMappingURL=CollectionContext.js.map

package/dist/cjs/components/collection/CollectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection';\n\ninterface CollectionContextType {\n    getStyles: GetStylesApi<CollectionFactory>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n    'Collection component was not found in tree',\n);\n"],"names":["CollectionProvider","useCollectionContext","createSafeContext"],"mappings":";;;;;;;;;;;IAOcA,kBAAkB;eAAlBA;;IAAoBC,oBAAoB;eAApBA;;;;oBAPiB;IAOOC,wCAAAA,IAAAA,uBAAiB,EACvE;AADG,IAAOF,qBAA4CE,uBAAxBD,uBAAwBC"}

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

@@ -1,11 +1,10 @@
-import { DefaultProps, Selectors } from '@mantine/core';
+import { GroupProps } from '@mantine/core';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import useStyles from './Collection.styles';
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;
     disabled: boolean;
 }
-interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
+interface CollectionItemSharedProps extends GroupProps {
     id: string;
     onRemove?: React.MouseEventHandler<HTMLButtonElement>;
     removable?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAwED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAmED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}