@coveord/plasma-mantine 47.0.1-next.2

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

@@ -0,0 +1,201 @@
+import _async_to_generator from "@swc/helpers/src/_async_to_generator.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import _ts_generator from "@swc/helpers/src/_ts_generator.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSize16Px, CopySize16Px } from "@coveord/plasma-react-icons";
+import { ActionIcon, Box, Center, CopyButton, createStyles, Group, Input, Loader, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+import Editor, { loader } from "@monaco-editor/react";
+import { useEffect, useState } from "react";
+import { useParentHeight } from "../../hooks";
+var useStyles = createStyles(function(theme) {
+    return {
+        root: {},
+        editor: {
+            border: "1px solid ".concat(theme.colors.gray[2]),
+            borderRadius: theme.defaultRadius,
+            backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
+            height: "100%"
+        }
+    };
+});
+var defaultProps = {
+    language: "plaintext",
+    monacoLoader: "local",
+    defaultValue: "",
+    minHeight: 300
+};
+export var CodeEditor = function(props) {
+    var _ref = useComponentDefaultProps("CodeEditor", defaultProps, props), language = _ref.language, defaultValue = _ref.defaultValue, onChange = _ref.onChange, onFocus = _ref.onFocus, value = _ref.value, label = _ref.label, required = _ref.required, labelProps = _ref.labelProps, error = _ref.error, errorProps = _ref.errorProps, description = _ref.description, descriptionProps = _ref.descriptionProps, minHeight = _ref.minHeight, maxHeight = _ref.maxHeight, disabled = _ref.disabled, monacoLoader = _ref.monacoLoader, others = _object_without_properties(_ref, [
+        "language",
+        "defaultValue",
+        "onChange",
+        "onFocus",
+        "value",
+        "label",
+        "required",
+        "labelProps",
+        "error",
+        "errorProps",
+        "description",
+        "descriptionProps",
+        "minHeight",
+        "maxHeight",
+        "disabled",
+        "monacoLoader"
+    ]);
+    var ref = _sliced_to_array(useState(false), 2), loaded = ref[0], setLoaded = ref[1];
+    var ref1 = useStyles(), classes = ref1.classes, theme = ref1.theme;
+    var ref2 = _sliced_to_array(useUncontrolled({
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        finalValue: ""
+    }), 2), _value = ref2[0], handleChange = ref2[1];
+    var ref3 = _sliced_to_array(useParentHeight(), 2), parentHeight = ref3[0], ref4 = ref3[1];
+    var loadLocalMonaco = function() {
+        var _ref = _async_to_generator(function() {
+            var monaco;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            import("monaco-editor")
+                        ];
+                    case 1:
+                        monaco = _state.sent();
+                        loader.config({
+                            monaco: monaco
+                        });
+                        setLoaded(true);
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function loadLocalMonaco() {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    useEffect(function() {
+        if (monacoLoader === "local") {
+            loadLocalMonaco();
+        } else {
+            setLoaded(true);
+        }
+    }, []);
+    var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
+        required: required
+    }, labelProps), {
+        children: label
+    })) : null;
+    var _description = description ? /*#__PURE__*/ _jsx(Input.Description, _object_spread_props(_object_spread({
+        mt: "xs"
+    }, descriptionProps), {
+        children: description
+    })) : null;
+    var _error = error ? /*#__PURE__*/ _jsx(Input.Error, _object_spread_props(_object_spread({
+        mt: "xs"
+    }, errorProps), {
+        children: error
+    })) : null;
+    var _header = _label || _description ? /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            _label,
+            _description
+        ]
+    }) : null;
+    var _copyButton = /*#__PURE__*/ _jsx(Group, {
+        position: "right",
+        children: /*#__PURE__*/ _jsx(CopyButton, {
+            value: _value,
+            timeout: 2000,
+            children: function(param) {
+                var copied = param.copied, copy = param.copy;
+                return /*#__PURE__*/ _jsx(Tooltip, {
+                    label: copied ? "Copied" : "Copy",
+                    withArrow: true,
+                    position: "right",
+                    children: /*#__PURE__*/ _jsx(ActionIcon, {
+                        color: copied ? "lime" : "gray",
+                        onClick: copy,
+                        children: copied ? /*#__PURE__*/ _jsx(CheckSize16Px, {
+                            height: 16
+                        }) : /*#__PURE__*/ _jsx(CopySize16Px, {
+                            height: 16
+                        })
+                    })
+                });
+            }
+        })
+    });
+    var _editor = loaded ? /*#__PURE__*/ _jsx(Box, {
+        p: "md",
+        pl: "xs",
+        className: classes.editor,
+        children: /*#__PURE__*/ _jsx(Editor, {
+            defaultLanguage: language,
+            theme: theme.colorScheme === "light" ? "light" : "vs-dark",
+            options: {
+                minimap: {
+                    enabled: false
+                },
+                wordWrap: "on",
+                wrappingStrategy: "advanced",
+                scrollBeyondLastLine: false,
+                formatOnPaste: true,
+                fontSize: theme.fontSizes.xs,
+                readOnly: disabled,
+                tabSize: 2
+            },
+            value: _value,
+            onChange: handleChange,
+            onMount: function(editor) {
+                editor.onDidFocusEditorText(onFocus);
+                editor.onDidBlurEditorText(/*#__PURE__*/ _async_to_generator(function() {
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                return [
+                                    4,
+                                    editor.getAction("editor.action.formatDocument").run()
+                                ];
+                            case 1:
+                                _state.sent();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }));
+            }
+        })
+    }) : /*#__PURE__*/ _jsx(Center, {
+        className: classes.editor,
+        children: /*#__PURE__*/ _jsx(Loader, {})
+    });
+    return /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({
+        justify: "flex-start",
+        className: classes.root,
+        spacing: 0,
+        sx: {
+            height: Math.max(parentHeight, minHeight),
+            maxHeight: maxHeight
+        },
+        ref: ref4
+    }, others), {
+        children: [
+            _header,
+            _copyButton,
+            _editor,
+            _error
+        ]
+    }));
+};
+
+//# sourceMappingURL=CodeEditor.js.map

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

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

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var MockedEditor = function(props) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-testid": "monaco-editor"
+    });
+};
+export default MockedEditor;
+export var loader = {
+    config: jest.fn()
+};
+
+//# sourceMappingURL=react.js.map

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {type EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n"],"names":["MockedEditor","props","div","data-testid","loader","config","jest","fn"],"mappings":"AAAA;AAGA,IAAMA,YAAY,GAAmC,SAACC,KAAK;yBAAK,KAACC,KAAG;QAACC,aAAW,EAAC,eAAe;MAAG;CAAA,AAAC;AAEpG,eAAeH,YAAY,CAAC;AAE5B,OAAO,IAAMI,MAAM,GAAG;IAClBC,MAAM,EAAEC,IAAI,CAACC,EAAE,EAAE;CACpB,CAAC"}

package/dist/esm/components/code-editor/__mocks__/monaco-editor.js

@@ -0,0 +1,14 @@
+var editor = {
+    create: function() {
+        return {
+            dispose: function() {
+                return null;
+            }
+        };
+    }
+};
+export var monaco = {
+    editor: editor
+};
+
+//# sourceMappingURL=monaco-editor.js.map

package/dist/esm/components/code-editor/__mocks__/monaco-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/__mocks__/monaco-editor.ts"],"sourcesContent":["const editor = {\n    create: () => ({\n        dispose: (): void => null,\n    }),\n};\n\nexport const monaco = {\n    editor,\n};\n"],"names":["editor","create","dispose","monaco"],"mappings":"AAAA,IAAMA,MAAM,GAAG;IACXC,MAAM,EAAE;eAAO;YACXC,OAAO,EAAE;uBAAY,IAAI;aAAA;SAC5B;KAAC;CACL,AAAC;AAEF,OAAO,IAAMC,MAAM,GAAG;IAClBH,MAAM,EAANA,MAAM;CACT,CAAC"}

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

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

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

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

package/dist/esm/components/collection/Collection.example.js

@@ -0,0 +1,54 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { Collection } from "./Collection";
+export default function() {
+    var form = useForm({
+        initialValues: {
+            todoList: [
+                {
+                    name: "wash the dishes",
+                    done: true
+                },
+                {
+                    name: "take out the trash",
+                    done: false
+                },
+                {
+                    name: "vacuum the floors",
+                    done: true
+                }
+            ]
+        }
+    });
+    return /*#__PURE__*/ _jsx(Collection, _object_spread_props(_object_spread({
+        draggable: true,
+        addLabel: "Add task",
+        newItem: {
+            name: "",
+            done: false
+        }
+    }, form.getInputProps("todoList")), {
+        children: function(task, index) {
+            return /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(TextInput, _object_spread_props(_object_spread({
+                        autoFocus: true,
+                        placeholder: "Do something ..."
+                    }, form.getInputProps("todoList.".concat(index, ".name"))), {
+                        styles: {
+                            flex: 1
+                        }
+                    })),
+                    /*#__PURE__*/ _jsx(Checkbox, _object_spread({}, form.getInputProps("todoList.".concat(index, ".done"), {
+                        type: "checkbox"
+                    })))
+                ]
+            });
+        }
+    }));
+};
+
+//# sourceMappingURL=Collection.example.js.map

package/dist/esm/components/collection/Collection.example.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Collection.example.tsx"],"sourcesContent":["import {Checkbox, TextInput} from '@mantine/core';\nimport {useForm} from '@mantine/form';\n\nimport {Collection} from './Collection';\n\nexport default () => {\n    const form = useForm({\n        initialValues: {\n            todoList: [\n                {name: 'wash the dishes', done: true},\n                {name: 'take out the trash', done: false},\n                {name: 'vacuum the floors', done: true},\n            ],\n        },\n    });\n\n    return (\n        <Collection<{name: string; done: boolean}>\n            draggable\n            addLabel=\"Add task\"\n            newItem={{name: '', done: false}}\n            {...form.getInputProps('todoList')}\n        >\n            {(task, index) => (\n                <>\n                    <TextInput\n                        autoFocus\n                        placeholder=\"Do something ...\"\n                        {...form.getInputProps(`todoList.${index}.name`)}\n                        styles={{flex: 1}}\n                    />\n                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />\n                </>\n            )}\n        </Collection>\n    );\n};\n"],"names":["Checkbox","TextInput","useForm","Collection","form","initialValues","todoList","name","done","draggable","addLabel","newItem","getInputProps","task","index","autoFocus","placeholder","styles","flex","type"],"mappings":"AAAA;;;AAAA,SAAQA,QAAQ,EAAEC,SAAS,QAAO,eAAe,CAAC;AAClD,SAAQC,OAAO,QAAO,eAAe,CAAC;AAEtC,SAAQC,UAAU,QAAO,cAAc,CAAC;AAExC,eAAe,WAAM;IACjB,IAAMC,IAAI,GAAGF,OAAO,CAAC;QACjBG,aAAa,EAAE;YACXC,QAAQ,EAAE;gBACN;oBAACC,IAAI,EAAE,iBAAiB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;gBACrC;oBAACD,IAAI,EAAE,oBAAoB;oBAAEC,IAAI,EAAE,KAAK;iBAAC;gBACzC;oBAACD,IAAI,EAAE,mBAAmB;oBAAEC,IAAI,EAAE,IAAI;iBAAC;aAC1C;SACJ;KACJ,CAAC,AAAC;IAEH,qBACI,KAACL,UAAU;QACPM,SAAS;QACTC,QAAQ,EAAC,UAAU;QACnBC,OAAO,EAAE;YAACJ,IAAI,EAAE,EAAE;YAAEC,IAAI,EAAE,KAAK;SAAC;OAC5BJ,IAAI,CAACQ,aAAa,CAAC,UAAU,CAAC;kBAEjC,SAACC,IAAI,EAAEC,KAAK;iCACT;;kCACI,KAACb,SAAS;wBACNc,SAAS;wBACTC,WAAW,EAAC,kBAAkB;uBAC1BZ,IAAI,CAACQ,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,CAAC;wBAChDG,MAAM,EAAE;4BAACC,IAAI,EAAE,CAAC;yBAAC;uBACnB;kCACF,KAAClB,QAAQ,qBAAKI,IAAI,CAACQ,aAAa,CAAC,AAAC,WAAS,CAAQ,MAAK,CAAXE,KAAK,EAAC,OAAK,CAAC,EAAE;wBAACK,IAAI,EAAE,UAAU;qBAAC,CAAC,EAAI;;cACnF;SACN;OACQ,CACf;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,118 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddSize16Px } from "@coveord/plasma-react-icons";
+import { Box, Button, Group, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { useControlledList } from "../../hooks";
+import { CollectionItem } from "./CollectionItem";
+import useStyles from "./Colllection.styles";
+var defaultProps = {
+    draggable: false,
+    addLabel: "Add item",
+    addDisabledTooltip: "There is already an empty item",
+    disabled: false,
+    spacing: "xs",
+    required: false
+};
+export var Collection = function(props) {
+    var _ref = useComponentDefaultProps("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
+    classNames = _ref.classNames, className = _ref.className, styles = _ref.styles, unstyled = _ref.unstyled, others = _object_without_properties(_ref, [
+        "value",
+        "defaultValue",
+        "onChange",
+        "disabled",
+        "draggable",
+        "children",
+        "spacing",
+        "required",
+        "newItem",
+        "addLabel",
+        "addDisabledTooltip",
+        "allowAdd",
+        "classNames",
+        "className",
+        "styles",
+        "unstyled"
+    ]);
+    var ref = useStyles(null, {
+        classNames: classNames,
+        name: "Collection",
+        styles: styles,
+        unstyled: unstyled
+    }), classes = ref.classes, cx = ref.cx;
+    var collectionID = useId("dnd-droppable");
+    var ref1 = _sliced_to_array(useControlledList({
+        value: value,
+        onChange: onChange,
+        defaultValue: defaultValue
+    }), 2), values = ref1[0], ref2 = ref1[1], append = ref2.append, remove = ref2.remove, reorder = ref2.reorder;
+    var hasOnlyOneItem = values.length === 1;
+    var items = values.map(function(item, index) {
+        return /*#__PURE__*/ _jsx(CollectionItem, {
+            disabled: disabled,
+            draggable: draggable,
+            index: index,
+            onRemove: function() {
+                return remove(index);
+            },
+            styles: styles,
+            removable: !(required && hasOnlyOneItem),
+            children: children(item, index)
+        }, index);
+    });
+    var ref3;
+    var addAllowed = (ref3 = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && ref3 !== void 0 ? ref3 : true;
+    var _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
+        children: /*#__PURE__*/ _jsx(Tooltip, {
+            label: addDisabledTooltip,
+            disabled: addAllowed,
+            children: /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "subtle",
+                    leftIcon: /*#__PURE__*/ _jsx(AddSize16Px, {
+                        height: 16
+                    }),
+                    onClick: function() {
+                        return append(newItem);
+                    },
+                    disabled: !addAllowed,
+                    children: addLabel
+                })
+            })
+        })
+    });
+    return /*#__PURE__*/ _jsx(DragDropContext, {
+        onDragEnd: function(param) {
+            var destination = param.destination, source = param.source;
+            return reorder({
+                from: source.index,
+                to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
+            });
+        },
+        children: /*#__PURE__*/ _jsx(Droppable, {
+            direction: "vertical",
+            droppableId: collectionID,
+            children: function(provided) {
+                return /*#__PURE__*/ _jsx(Box, _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, provided.droppableProps), {
+                    ref: provided.innerRef,
+                    className: cx(classes.root, className)
+                }), others), {
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: spacing,
+                        children: [
+                            items,
+                            provided.placeholder,
+                            _addButton
+                        ]
+                    })
+                }));
+            }
+        })
+    });
+};
+
+//# sourceMappingURL=Collection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    Button,\n    DefaultProps,\n    Group,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Colllection.styles';\n\ninterface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {\n    newItem: T;\n    children: (item: T, index: number) => ReactNode;\n    defaultValue?: T[];\n    value?: T[];\n    onFocus?: () => void;\n    onChange?: (value: T[]) => void;\n    draggable?: boolean;\n    disabled?: boolean;\n    allowAdd?: (values: T[]) => boolean;\n    addLabel?: string;\n    addDisabledTooltip?: string;\n    spacing?: MantineNumberSize;\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};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        defaultValue,\n        onChange,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\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 collectionID = useId('dnd-droppable');\n\n    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n    const hasOnlyOneItem = values.length === 1;\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => remove(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(values) ?? 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={() => append(newItem)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["AddSize16Px","Box","Button","Group","Stack","Tooltip","useComponentDefaultProps","useId","DragDropContext","Droppable","useControlledList","CollectionItem","useStyles","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","defaultValue","onChange","children","newItem","allowAdd","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","items","map","item","index","onRemove","removable","addAllowed","_addButton","label","variant","leftIcon","height","onClick","onDragEnd","destination","source","from","to","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}

package/dist/esm/components/collection/CollectionItem.js

@@ -0,0 +1,98 @@
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragAndDropSize16Px, RemoveSize16Px } from "@coveord/plasma-react-icons";
+import { ActionIcon, Group } from "@mantine/core";
+import { Draggable } from "react-beautiful-dnd";
+import useStyles from "./Colllection.styles";
+var RemoveButton = function(param) {
+    var onClick = param.onClick;
+    return /*#__PURE__*/ _jsx(ActionIcon, {
+        variant: "subtle",
+        onClick: onClick,
+        color: "action",
+        children: /*#__PURE__*/ _jsx(RemoveSize16Px, {
+            height: 16
+        })
+    });
+};
+var RemoveButtonPlaceholder = function() {
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            width: 28
+        }
+    });
+};
+var StaticCollectionItem = function(param) {
+    var onRemove = param.onRemove, _removable = param.removable, removable = _removable === void 0 ? true : _removable, styles = param.styles, children = param.children;
+    var ref = useStyles(null, {
+        name: "Collection",
+        styles: styles
+    }), classes = ref.classes, cx = ref.cx;
+    var removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
+        onClick: onRemove
+    }) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
+    return /*#__PURE__*/ _jsxs(Group, {
+        className: cx(classes.item),
+        children: [
+            children,
+            removeButton
+        ]
+    });
+};
+var DisabledCollectionItem = function(param) {
+    var children = param.children;
+    var ref = useStyles(), classes = ref.classes, cx = ref.cx;
+    return /*#__PURE__*/ _jsx(Group, {
+        className: cx(classes.item),
+        children: children
+    });
+};
+var DraggableCollectionItem = function(param) {
+    var index = param.index, onRemove = param.onRemove, _removable = param.removable, removable = _removable === void 0 ? true : _removable, styles = param.styles, children = param.children;
+    var ref = useStyles(null, {
+        name: "Collection",
+        styles: styles
+    }), classes = ref.classes, cx = ref.cx;
+    var removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
+        onClick: onRemove
+    }) : null;
+    return /*#__PURE__*/ _jsx(Draggable, {
+        index: index,
+        draggableId: index.toString(),
+        children: function(provided, param) {
+            var isDragging = param.isDragging;
+            return /*#__PURE__*/ _jsxs(Group, _object_spread_props(_object_spread({
+                ref: provided.innerRef
+            }, provided.draggableProps), {
+                className: cx(classes.item, _define_property({}, classes.itemDragging, isDragging)),
+                children: [
+                    /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({}, provided.dragHandleProps), {
+                        children: /*#__PURE__*/ _jsx(DragAndDropSize16Px, {
+                            height: 16
+                        })
+                    })),
+                    children,
+                    removeButton
+                ]
+            }));
+        }
+    });
+};
+export var CollectionItem = function(_param) {
+    var draggable = _param.draggable, disabled = _param.disabled, otherProps = _object_without_properties(_param, [
+        "draggable",
+        "disabled"
+    ]);
+    if (disabled) {
+        return /*#__PURE__*/ _jsx(DisabledCollectionItem, _object_spread({}, otherProps));
+    }
+    if (draggable) {
+        return /*#__PURE__*/ _jsx(DraggableCollectionItem, _object_spread({}, otherProps));
+    }
+    return /*#__PURE__*/ _jsx(StaticCollectionItem, _object_spread({}, otherProps));
+};
+
+//# sourceMappingURL=CollectionItem.js.map

package/dist/esm/components/collection/CollectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Colllection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const {classes, cx} = useStyles();\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize16Px","RemoveSize16Px","ActionIcon","Group","Draggable","useStyles","RemoveButton","onClick","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","name","classes","cx","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","index","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","CollectionItem","draggable","disabled","otherProps"],"mappings":"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"}

package/dist/esm/components/collection/Colllection.styles.js

@@ -0,0 +1,15 @@
+import { createStyles } from "@mantine/core";
+export default createStyles(function(theme) {
+    return {
+        root: {},
+        item: {
+            backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
+            alignItems: "baseline"
+        },
+        itemDragging: {
+            boxShadow: theme.shadows.sm
+        }
+    };
+});
+
+//# sourceMappingURL=Colllection.styles.js.map

package/dist/esm/components/collection/Colllection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Colllection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,eAAe,CAAC;AAI3C,eAAeA,YAAY,CAAC,SAACC,KAAK;WAAM;QACpCC,IAAI,EAAE,EAAE;QACRC,IAAI,EAAE;YACFC,eAAe,EAAEH,KAAK,CAACI,WAAW,KAAK,OAAO,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACM,KAAK;YAC1EC,UAAU,EAAE,UAAU;SACzB;QACDC,YAAY,EAAE;YACVC,SAAS,EAAET,KAAK,CAACU,OAAO,CAACC,EAAE;SAC9B;KACJ;CAAC,CAAC,CAAC"}

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

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

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

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