@coveord/plasma-mantine 51.2.0 → 52.1.0

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

@@ -16,13 +16,13 @@ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_propert
 var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
 var _tsGenerator = require("@swc/helpers/lib/_ts_generator.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
-var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("@monaco-editor/react"));
 var _react1 = require("react");
 var _hooks1 = require("../../hooks");
 var _xml = require("./languages/xml");
+var _copyToClipboard = require("../copyToClipboard");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {},
@@ -131,26 +131,8 @@ var CodeEditor = function(props) {
     }) : null;
     var _copyButton = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
         position: "right",
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.CopyButton, {
-            value: _value,
-            timeout: 2000,
-            children: function(param) {
-                var copied = param.copied, copy = param.copy;
-                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
-                    label: copied ? "Copied" : "Copy",
-                    withArrow: true,
-                    position: "right",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
-                        color: copied ? "lime" : "gray",
-                        onClick: copy,
-                        children: copied ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CheckSize16Px, {
-                            height: 16
-                        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CopySize16Px, {
-                            height: 16
-                        })
-                    })
-                });
-            }
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_copyToClipboard.CopyToClipboard, {
+            value: _value
         })
     });
     var _editor = loaded ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {

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

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

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

@@ -16,6 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
+var _react = require("react");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
 var _button = require("../button");
 var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
@@ -29,7 +30,7 @@ var defaultProps = {
     required: false
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.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, // Style props
+    var _useComponentDefaultProps = (0, _core.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 = _objectWithoutProperties(_useComponentDefaultProps, [
         "value",
         "onChange",
@@ -52,6 +53,7 @@ var Collection = function(props) {
         "descriptionProps",
         "error",
         "errorProps",
+        "getItemId",
         "classNames",
         "className",
         "styles",
@@ -63,7 +65,7 @@ var Collection = function(props) {
         styles: styles,
         unstyled: unstyled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
-    var collectionID = (0, _hooks.useId)("dnd-droppable");
+    var collectionID = (0, _react.useId)();
     var hasOnlyOneItem = value.length === 1;
     /**
      * Enforcing onChange when the value is modified will make sure the errors are carried through.
@@ -90,6 +92,7 @@ var Collection = function(props) {
             _description
         ]
     }) : null;
+    var _getItemId;
     var items = value.map(function(item, index) {
         /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
             disabled: disabled,
@@ -101,7 +104,7 @@ var Collection = function(props) {
             styles: styles,
             removable: !(required && hasOnlyOneItem),
             children: children(item, index)
-        }, index);
+        }, (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : index);
     });
     var _allowAdd;
     var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;

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 {\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, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\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     * 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};\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\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 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 items = value.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, 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    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({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                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\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, useId} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\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};\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 collectionID = useId();\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 items = value.map((item, index) => (\n        <CollectionItem\n            key={(getItemId?.(item) ?? index) as string}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, 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    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({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                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","getItemId","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}

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

@@ -99,7 +99,7 @@ var DraggableCollectionItem = function(param) {
                 ]
             }));
         }
-    });
+    }, index);
 };
 var CollectionItem = function(_param) {
     var draggable = _param.draggable, disabled = _param.disabled, otherProps = _objectWithoutProperties(_param, [

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

@@ -1 +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 './Collection.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 sx={{alignSelf: 'center'}} 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>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\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} style={{alignSelf: 'center'}}>\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":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAACD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMvB,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}
+{"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 './Collection.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 sx={{alignSelf: 'center'}} 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>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\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 key={index} 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} style={{alignSelf: 'center'}}>\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":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAAaD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC3D,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;OAXGM;AAgBxB;AAEO,IAAM7B,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CopyToClipboard", {
+    enumerable: true,
+    get: function() {
+        return CopyToClipboard;
+    }
+});
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _plasmaReactIcons = require("@coveord/plasma-react-icons");
+var _core = require("@mantine/core");
+var useStyles = (0, _core.createStyles)(function(theme) {
+    return {
+        input: {
+            color: theme.colors.gray[7]
+        }
+    };
+});
+var CopyToClipboardButton = function(param) {
+    var value = param.value, onCopy = param.onCopy;
+    /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_core.CopyButton, {
+        value: value,
+        timeout: 2000,
+        children: function(param) {
+            var copied = param.copied, copy = param.copy;
+            /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_core.Tooltip, {
+                label: copied ? "Copied" : "Copy",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
+                    color: copied ? "success" : "gray",
+                    onClick: function() {
+                        copy();
+                        onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+                    },
+                    children: copied ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CheckSize16Px, {
+                        height: 16
+                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CopySize16Px, {
+                        height: 16
+                    })
+                })
+            });
+        }
+    });
+};
+var CopyToClipboard = function(_param) {
+    var withLabel = _param.withLabel, others = _objectWithoutProperties(_param, [
+        "withLabel"
+    ]);
+    var classes = useStyles().classes;
+    return withLabel ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, {
+        classNames: {
+            input: classes.input
+        },
+        value: others.value,
+        readOnly: true,
+        rightSection: /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, _objectSpread({}, others))
+    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, _objectSpread({}, others));
+};
+
+//# sourceMappingURL=CopyToClipboard.js.map

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","classes","TextInput","classNames","readOnly","rightSection"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5C6B;oBAC6B;AAmBvE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;kBACrG,OAAA,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;0BACP,OAAA,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW,MAAM;0BACtC,cAAA,qBAACI,gBAAU;oBACPZ,OAAOQ,SAAS,YAAY,MAAM;oBAClCK,SAAS,WAAM;wBACXJ;wBACAJ,mBAAAA,oBAAAA,KAAAA,IAAAA;oBACJ;8BAECG,uBAAS,qBAACM,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;sBAAM;;;;;;AAOnF,IAAMpB,kBAAiE,iBAA4B;QAA1BsB,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWvB,YAAXuB;IAEP,OAAOF,0BACH,qBAACG,eAAS;QACNC,YAAY;YACRtB,OAAOoB,QAAQpB,KAAK;QACxB;QACAK,OAAOc,OAAOd,KAAK;QACnBkB,QAAQ;QACRC,4BAAc,qBAACpB,yCAA0Be;uBAG7C,qBAACf,yCAA0Be,QAC9B;AACL"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/copyToClipboard/index.ts"],"sourcesContent":["export * from './CopyToClipboard';\n"],"names":[],"mappings":";;;;;oBAAc"}

package/dist/cjs/components/index.js

@@ -15,5 +15,6 @@ _exportStar(require("./prompt"), exports);
 _exportStar(require("./modal-wizard"), exports);
 _exportStar(require("./button"), exports);
 _exportStar(require("./menu"), exports);
+_exportStar(require("./copyToClipboard"), exports);
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './modal-wizard';\nexport * from './button';\nexport * from './menu';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './modal-wizard';\nexport * from './button';\nexport * from './menu';\nexport * from './copyToClipboard';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}

package/dist/cjs/components/modal-wizard/ModalWizard.js

@@ -166,7 +166,7 @@ var ModalWizard = function(_param) {
                                 if (isFirstStep) {
                                     handleClose(true);
                                 } else {
-                                    onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious();
+                                    onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious(currentStepIndex - 1);
                                     setCurrentStepIndex(currentStepIndex - 1);
                                 }
                             },
@@ -179,7 +179,7 @@ var ModalWizard = function(_param) {
                                     var _onFinish;
                                     (_onFinish = onFinish === null || onFinish === void 0 ? void 0 : onFinish()) !== null && _onFinish !== void 0 ? _onFinish : handleClose(false);
                                 } else {
-                                    onNext === null || onNext === void 0 ? void 0 : onNext();
+                                    onNext === null || onNext === void 0 ? void 0 : onNext(currentStepIndex + 1);
                                     setCurrentStepIndex(currentStepIndex + 1);
                                 }
                             },

package/dist/cjs/components/modal-wizard/ModalWizard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n    content: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    body: {\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n    },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n    extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n        Omit<ModalProps, 'centered' | 'title'> {\n    /**\n     * The label of the cancel button\n     *\n     * @default \"Cancel\"\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * The label of the next button\n     *\n     * @default \"Next\"\n     */\n    nextButtonLabel?: string;\n\n    /**\n     * The label of the previous button\n     *\n     * @default \"Previous\"\n     */\n    previousButtonLabel?: string;\n\n    /**\n     * The label of the finish button\n     *\n     * @default \"Finish\"\n     */\n    finishButtonLabel?: string;\n\n    /**\n     * A callback function that is executed when the user clicks on the next button\n     */\n    onNext?: () => unknown;\n\n    /**\n     * A callback function that is executed when the user clicks on the previous button\n     */\n    onPrevious?: () => unknown;\n\n    /**\n     * A function that is executed when user completes all the steps.\n     *\n     * @param close A function that closes the modal when called.\n     */\n    onFinish?: () => unknown;\n\n    /**\n     * Determine if user interacted with any steps in the modal wizard\n     */\n    isDirty?: () => boolean;\n\n    /**\n     * A function to confirm close if the state is dirty before closing\n     */\n    handleDirtyState?: () => boolean;\n\n    /**\n     * Children to display in modal wizard\n     * */\n    children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n    (props: ModalWizardProps): ReactElement;\n\n    Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n    cancelButtonLabel = 'Cancel',\n    nextButtonLabel = 'Next',\n    previousButtonLabel = 'Previous',\n    finishButtonLabel = 'Finish',\n    opened,\n    onNext,\n    onPrevious,\n    onClose,\n    onFinish,\n    isDirty,\n    handleDirtyState,\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...modalProps\n}) => {\n    const {\n        classes: {content, body},\n        cx,\n    } = useStyles(null, {\n        name: 'ModalWizard',\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const [currentStepIndex, setCurrentStepIndex] = useState(0);\n    const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n    const numberOfSteps = modalSteps.length;\n    const isFirstStep = currentStepIndex === 0;\n    const isLastStep = currentStepIndex === numberOfSteps - 1;\n    const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n    useEffect(() => {\n        if (opened) {\n            setCurrentStepIndex(0);\n        }\n    }, [opened]);\n\n    const handleClose = (confirmDirty: boolean) => {\n        if (confirmDirty) {\n            const isModalDirty = isDirty?.() ?? false;\n            if (isModalDirty) {\n                const discardChanges = handleDirtyState?.() ?? true;\n                if (!discardChanges) {\n                    return;\n                }\n            }\n        }\n        onClose?.();\n    };\n\n    const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n        prop: P\n    ): ResolveStep<ModalWizardStepProps[P]> =>\n        typeof currentStep.props[prop] === 'function'\n            ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n            : currentStep.props[prop];\n\n    const getProgress = useMemo(\n        () => (currStepIndex: number) => {\n            const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n            const numberOfCompletedSteps = modalSteps.filter(\n                (step, index) => step.props.countsAsProgress && index <= currStepIndex\n            ).length;\n            return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n        },\n        []\n    );\n\n    return (\n        <Modal\n            opened={opened}\n            classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n            centered\n            onClose={() => handleClose(true)}\n            withCloseButton={false}\n            padding={0}\n            {...modalProps}\n        >\n            <Header\n                p=\"lg\"\n                pr=\"md\"\n                variant=\"modal\"\n                description={resolveStepDependentProp('description')}\n                borderBottom={!currentStep.props.showProgressBar}\n            >\n                {resolveStepDependentProp('title')}\n                {resolveStepDependentProp('docLink') ? (\n                    <Header.DocAnchor\n                        href={resolveStepDependentProp('docLink')}\n                        label={resolveStepDependentProp('docLinkTooltipLabel')}\n                    />\n                ) : null}\n                <Header.Actions>\n                    <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n                </Header.Actions>\n            </Header>\n            {currentStep.props.showProgressBar && (\n                <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n            )}\n            <Box p=\"lg\">{currentStep}</Box>\n            <Box\n                sx={{\n                    marginTop: 'auto',\n                }}\n            >\n                <StickyFooter borderTop>\n                    <Button\n                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                        variant=\"outline\"\n                        onClick={() => {\n                            if (isFirstStep) {\n                                handleClose(true);\n                            } else {\n                                onPrevious?.();\n                                setCurrentStepIndex(currentStepIndex - 1);\n                            }\n                        }}\n                    >\n                        {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                    </Button>\n\n                    <Button\n                        disabled={!isValid}\n                        onClick={() => {\n                            if (isLastStep) {\n                                onFinish?.() ?? handleClose(false);\n                            } else {\n                                onNext?.();\n                                setCurrentStepIndex(currentStepIndex + 1);\n                            }\n                        }}\n                    >\n                        {isLastStep ? finishButtonLabel : nextButtonLabel}\n                    </Button>\n                </StickyFooter>\n            </Box>\n        </Modal>\n    );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n    content: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    body: {\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n    },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n    extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n        Omit<ModalProps, 'centered' | 'title'> {\n    /**\n     * The label of the cancel button\n     *\n     * @default \"Cancel\"\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * The label of the next button\n     *\n     * @default \"Next\"\n     */\n    nextButtonLabel?: string;\n\n    /**\n     * The label of the previous button\n     *\n     * @default \"Previous\"\n     */\n    previousButtonLabel?: string;\n\n    /**\n     * The label of the finish button\n     *\n     * @default \"Finish\"\n     */\n    finishButtonLabel?: string;\n\n    /**\n     * A callback function that is executed when the user clicks on the next button\n     */\n    onNext?: (newStep: number) => unknown;\n\n    /**\n     * A callback function that is executed when the user clicks on the previous button\n     */\n    onPrevious?: (newStep: number) => unknown;\n\n    /**\n     * A function that is executed when user completes all the steps.\n     *\n     * @param close A function that closes the modal when called.\n     */\n    onFinish?: () => unknown;\n\n    /**\n     * Determine if user interacted with any steps in the modal wizard\n     */\n    isDirty?: () => boolean;\n\n    /**\n     * A function to confirm close if the state is dirty before closing\n     */\n    handleDirtyState?: () => boolean;\n\n    /**\n     * Children to display in modal wizard\n     * */\n    children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n    (props: ModalWizardProps): ReactElement;\n\n    Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n    cancelButtonLabel = 'Cancel',\n    nextButtonLabel = 'Next',\n    previousButtonLabel = 'Previous',\n    finishButtonLabel = 'Finish',\n    opened,\n    onNext,\n    onPrevious,\n    onClose,\n    onFinish,\n    isDirty,\n    handleDirtyState,\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...modalProps\n}) => {\n    const {\n        classes: {content, body},\n        cx,\n    } = useStyles(null, {\n        name: 'ModalWizard',\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const [currentStepIndex, setCurrentStepIndex] = useState(0);\n    const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n    const numberOfSteps = modalSteps.length;\n    const isFirstStep = currentStepIndex === 0;\n    const isLastStep = currentStepIndex === numberOfSteps - 1;\n    const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n    useEffect(() => {\n        if (opened) {\n            setCurrentStepIndex(0);\n        }\n    }, [opened]);\n\n    const handleClose = (confirmDirty: boolean) => {\n        if (confirmDirty) {\n            const isModalDirty = isDirty?.() ?? false;\n            if (isModalDirty) {\n                const discardChanges = handleDirtyState?.() ?? true;\n                if (!discardChanges) {\n                    return;\n                }\n            }\n        }\n        onClose?.();\n    };\n\n    const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n        prop: P\n    ): ResolveStep<ModalWizardStepProps[P]> =>\n        typeof currentStep.props[prop] === 'function'\n            ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n            : currentStep.props[prop];\n\n    const getProgress = useMemo(\n        () => (currStepIndex: number) => {\n            const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n            const numberOfCompletedSteps = modalSteps.filter(\n                (step, index) => step.props.countsAsProgress && index <= currStepIndex\n            ).length;\n            return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n        },\n        []\n    );\n\n    return (\n        <Modal\n            opened={opened}\n            classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n            centered\n            onClose={() => handleClose(true)}\n            withCloseButton={false}\n            padding={0}\n            {...modalProps}\n        >\n            <Header\n                p=\"lg\"\n                pr=\"md\"\n                variant=\"modal\"\n                description={resolveStepDependentProp('description')}\n                borderBottom={!currentStep.props.showProgressBar}\n            >\n                {resolveStepDependentProp('title')}\n                {resolveStepDependentProp('docLink') ? (\n                    <Header.DocAnchor\n                        href={resolveStepDependentProp('docLink')}\n                        label={resolveStepDependentProp('docLinkTooltipLabel')}\n                    />\n                ) : null}\n                <Header.Actions>\n                    <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n                </Header.Actions>\n            </Header>\n            {currentStep.props.showProgressBar && (\n                <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n            )}\n            <Box p=\"lg\">{currentStep}</Box>\n            <Box\n                sx={{\n                    marginTop: 'auto',\n                }}\n            >\n                <StickyFooter borderTop>\n                    <Button\n                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                        variant=\"outline\"\n                        onClick={() => {\n                            if (isFirstStep) {\n                                handleClose(true);\n                            } else {\n                                onPrevious?.(currentStepIndex - 1);\n                                setCurrentStepIndex(currentStepIndex - 1);\n                            }\n                        }}\n                    >\n                        {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                    </Button>\n\n                    <Button\n                        disabled={!isValid}\n                        onClick={() => {\n                            if (isLastStep) {\n                                onFinish?.() ?? handleClose(false);\n                            } else {\n                                onNext?.(currentStepIndex + 1);\n                                setCurrentStepIndex(currentStepIndex + 1);\n                            }\n                        }}\n                    >\n                        {isLastStep ? finishButtonLabel : nextButtonLabel}\n                    </Button>\n                </StickyFooter>\n            </Box>\n        </Modal>\n    );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":"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"}

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

@@ -33,6 +33,7 @@ var _tableHeader = require("./TableHeader");
 var _tablePagination = require("./TablePagination");
 var _tablePerPage = require("./TablePerPage");
 var _tablePredicate = require("./TablePredicate");
+var _tableConsumer = require("./TableConsumer");
 var _tableSelectableColumn = require("./TableSelectableColumn");
 var _th = require("./Th");
 var _useRowSelection = require("./useRowSelection");
@@ -58,6 +59,9 @@ var Table = function(param) {
     var footer = convertedChildren.find(function(child) {
         return child.type === _tableFooter.TableFooter;
     });
+    var consumer = convertedChildren.find(function(child) {
+        return child.type === _tableConsumer.TableConsumer;
+    });
     var predicates = initialState.predicates, dateRange = initialState.dateRange, initialStateWithoutForm = _objectWithoutProperties(initialState, [
         "predicates",
         "dateRange"
@@ -201,7 +205,7 @@ var Table = function(param) {
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
         ref: outsideClickRef,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableContext.TableContext.Provider, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_tableContext.TableContext.Provider, {
             value: {
                 onChange: triggerChange,
                 state: state,
@@ -216,43 +220,46 @@ var Table = function(param) {
                 multiRowSelectionEnabled: multiRowSelectionEnabled,
                 getPageCount: table.getPageCount
             },
-            children: !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [
-                    header,
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Table, {
-                        className: classes.table,
-                        horizontalSpacing: "sm",
-                        verticalSpacing: "xs",
-                        pb: "sm",
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)("thead", {
-                                className: classes.header,
-                                children: table.getHeaderGroups().map(function(headerGroup) {
-                                    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
-                                        children: headerGroup.headers.map(function(columnHeader) {
-                                            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_th.Th, {
-                                                header: columnHeader
-                                            }, columnHeader.id);
-                                        })
-                                    }, headerGroup.id);
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
-                                children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
-                                        colSpan: table.getAllColumns().length,
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(LoadingSkeleton, {
-                                            visible: loading,
-                                            children: noDataChildren
+            children: [
+                consumer,
+                !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [
+                        header,
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Table, {
+                            className: classes.table,
+                            horizontalSpacing: "sm",
+                            verticalSpacing: "xs",
+                            pb: "sm",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)("thead", {
+                                    className: classes.header,
+                                    children: table.getHeaderGroups().map(function(headerGroup) {
+                                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
+                                            children: headerGroup.headers.map(function(columnHeader) {
+                                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_th.Th, {
+                                                    header: columnHeader
+                                                }, columnHeader.id);
+                                            })
+                                        }, headerGroup.id);
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
+                                    children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
+                                            colSpan: table.getAllColumns().length,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(LoadingSkeleton, {
+                                                visible: loading,
+                                                children: noDataChildren
+                                            })
                                         })
                                     })
                                 })
-                            })
-                        ]
-                    }),
-                    footer
-                ]
-            })
+                            ]
+                        }),
+                        footer
+                    ]
+                })
+            ]
         })
     });
 };
@@ -267,5 +274,6 @@ Table.Predicate = _tablePredicate.TablePredicate;
 Table.CollapsibleColumn = _tableCollapsibleColumn.TableCollapsibleColumn;
 Table.AccordionColumn = _tableCollapsibleColumn.TableAccordionColumn;
 Table.DateRangePicker = _tableDateRangePicker.TableDateRangePicker;
+Table.Consumer = _tableConsumer.TableConsumer;
 
 //# sourceMappingURL=Table.js.map