@coveord/plasma-mantine 48.18.0 → 48.18.1

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

@@ -20,7 +20,7 @@ var _hooks = require("@mantine/hooks");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
 var _hooks1 = require("../../hooks");
 var _collectionItem = require("./CollectionItem");
-var _colllectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Colllection.styles"));
+var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -30,7 +30,7 @@ var defaultProps = {
     required: false
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, 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, // Style props
+    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, 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, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _objectWithoutProperties(_useComponentDefaultProps, [
         "value",
         "defaultValue",
@@ -45,12 +45,18 @@ var Collection = function(props) {
         "addLabel",
         "addDisabledTooltip",
         "allowAdd",
+        "label",
+        "labelProps",
+        "description",
+        "descriptionProps",
+        "error",
+        "errorProps",
         "classNames",
         "className",
         "styles",
         "unstyled"
     ]);
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         classNames: classNames,
         name: "Collection",
         styles: styles,
@@ -69,6 +75,24 @@ var Collection = function(props) {
             onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
         };
     };
+    var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
+        required: required
+    }, labelProps), {
+        children: label
+    })) : null;
+    var _description = description ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Description, _objectSpreadProps(_objectSpread({}, descriptionProps), {
+        children: description
+    })) : null;
+    var _error = error ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Error, _objectSpreadProps(_objectSpread({}, errorProps), {
+        children: error
+    })) : null;
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
+        spacing: "xs",
+        children: [
+            _label,
+            _description
+        ]
+    }) : null;
     var items = values.map(function(item, index) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
             disabled: disabled,
@@ -118,11 +142,17 @@ var Collection = function(props) {
                     className: cx(classes.root, className)
                 }), others), {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
-                        spacing: spacing,
                         children: [
-                            items,
-                            provided.placeholder,
-                            _addButton
+                            _header,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
+                                spacing: spacing,
+                                children: [
+                                    items,
+                                    provided.placeholder,
+                                    _addButton,
+                                    _error
+                                ]
+                            })
                         ]
                     })
                 }));

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    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    /**\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     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: 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     * 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        defaultValue,\n        onChange,\n        onRemoveItem,\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 removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\n    };\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","label","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    Button,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\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';\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Collection.styles';\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     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: 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     * 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        defaultValue,\n        onChange,\n        onRemoveItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\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 [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n    const hasOnlyOneItem = values.length === 1;\n    const removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\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    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Stack spacing=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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>\n                            {_header}\n                            <Stack spacing={spacing}>\n                                {items}\n                                {provided.placeholder}\n                                {_addButton}\n                                {_error}\n                            </Stack>\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Input","Label","_description","Description","_error","Error","_header","Stack","items","map","item","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","placeholder"],"mappings":"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"}

package/dist/cjs/components/collection/{Colllection.styles.js → Collection.styles.js}

@@ -22,4 +22,4 @@ var _default = (0, _core.createStyles)(function(theme) {
     };
 });
 
-//# sourceMappingURL=Colllection.styles.js.map
+//# sourceMappingURL=Collection.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Collection.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;;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}

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

@@ -17,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
-var _colllectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Colllection.styles"));
+var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
 var RemoveButton = function(param) {
     var onClick = param.onClick;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
@@ -38,7 +38,7 @@ var RemoveButtonPlaceholder = function() {
 };
 var StaticCollectionItem = function(param) {
     var onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         name: "Collection",
         styles: styles
     }), classes = _useStyles.classes, cx = _useStyles.cx;
@@ -55,7 +55,7 @@ var StaticCollectionItem = function(param) {
 };
 var DisabledCollectionItem = function(param) {
     var children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(), classes = _useStyles.classes, cx = _useStyles.cx;
+    var _useStyles = (0, _collectionStyles.default)(), classes = _useStyles.classes, cx = _useStyles.cx;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
         className: cx(classes.item),
         children: children
@@ -63,7 +63,7 @@ var DisabledCollectionItem = function(param) {
 };
 var DraggableCollectionItem = function(param) {
     var index = param.index, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
-    var _useStyles = (0, _colllectionStyles.default)(null, {
+    var _useStyles = (0, _collectionStyles.default)(null, {
         name: "Collection",
         styles: styles
     }), classes = _useStyles.classes, cx = _useStyles.cx;

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 './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":["CollectionItem","RemoveButton","onClick","ActionIcon","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":"AAAA;;;;+BA+EaA;;;eAAAA;;;;;;;;;gCA/EqC;oBACO;iCAEjC;sEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,SAAQ;QAASF,SAASA;QAASG,OAAM;kBACjD,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,0BAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAAgB;QAAdT,iBAAAA;IAC9F,IAAsBC,aAAAA,IAAAA,0BAAS,KAAxBE,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,0BAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;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;kCAC7B,cAAA,qBAACC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMrB,iBAA4E,iBAInF;QAHFuC,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 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":["CollectionItem","RemoveButton","onClick","ActionIcon","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":"AAAA;;;;+BA+EaA;;;eAAAA;;;;;;;;;gCA/EqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,SAAQ;QAASF,SAASA;QAASG,OAAM;kBACjD,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,qBAACZ;QAAaC,SAASW;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAAgB;QAAdT,iBAAAA;IAC9F,IAAsBC,aAAAA,IAAAA,yBAAS,KAAxBE,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,qBAACZ;QAAaC,SAASW;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;kCAC7B,cAAA,qBAACC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMrB,iBAA4E,iBAInF;QAHFuC,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/definitions/components/collection/Collection.d.ts

@@ -1,7 +1,7 @@
-import { DefaultProps, MantineNumberSize, Selectors } from '@mantine/core';
+import { DefaultProps, InputWrapperBaseProps, MantineNumberSize, Selectors } from '@mantine/core';
 import { ReactNode } from 'react';
-import useStyles from './Colllection.styles';
-interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+import useStyles from './Collection.styles';
+interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
     /**
      * The default value each new item should have
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC1E;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAyFtB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAqHtB,CAAC"}

package/dist/definitions/components/collection/{Colllection.styles.d.ts → Collection.styles.d.ts}

@@ -6,4 +6,4 @@ declare const _default: (params: void, options?: import("@mantine/core").UseStyl
     theme: import("@mantine/core").MantineTheme;
 };
 export default _default;
-//# sourceMappingURL=Colllection.styles.d.ts.map
+//# sourceMappingURL=Collection.styles.d.ts.map

package/dist/definitions/components/collection/Collection.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;AAE1C,wBASI"}

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

@@ -1,6 +1,6 @@
 import { DefaultProps, Selectors } from '@mantine/core';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import useStyles from './Colllection.styles';
+import useStyles from './Collection.styles';
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;
     disabled: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AA+DD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AA+DD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

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

@@ -4,12 +4,12 @@ import _object_without_properties from "@swc/helpers/src/_object_without_propert
 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 { Box, Button, Group, Input, 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";
+import useStyles from "./Collection.styles";
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -19,7 +19,7 @@ var defaultProps = {
     required: false
 };
 export var Collection = function(props) {
-    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, 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, // Style props
+    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, 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, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties(_useComponentDefaultProps, [
         "value",
         "defaultValue",
@@ -34,6 +34,12 @@ export var Collection = function(props) {
         "addLabel",
         "addDisabledTooltip",
         "allowAdd",
+        "label",
+        "labelProps",
+        "description",
+        "descriptionProps",
+        "error",
+        "errorProps",
         "classNames",
         "className",
         "styles",
@@ -58,6 +64,24 @@ export var Collection = function(props) {
             onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
         };
     };
+    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({}, descriptionProps), {
+        children: description
+    })) : null;
+    var _error = error ? /*#__PURE__*/ _jsx(Input.Error, _object_spread_props(_object_spread({}, errorProps), {
+        children: error
+    })) : null;
+    var _header = _label || _description ? /*#__PURE__*/ _jsxs(Stack, {
+        spacing: "xs",
+        children: [
+            _label,
+            _description
+        ]
+    }) : null;
     var items = values.map(function(item, index) {
         return /*#__PURE__*/ _jsx(CollectionItem, {
             disabled: disabled,
@@ -107,11 +131,17 @@ export var Collection = function(props) {
                     className: cx(classes.root, className)
                 }), others), {
                     children: /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: spacing,
                         children: [
-                            items,
-                            provided.placeholder,
-                            _addButton
+                            _header,
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: spacing,
+                                children: [
+                                    items,
+                                    provided.placeholder,
+                                    _addButton,
+                                    _error
+                                ]
+                            })
                         ]
                     })
                 }));

package/dist/esm/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    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    /**\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     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: 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     * 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        defaultValue,\n        onChange,\n        onRemoveItem,\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 removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\n    };\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","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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"}
+{"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    Input,\n    InputWrapperBaseProps,\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';\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Collection.styles';\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     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: 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     * 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        defaultValue,\n        onChange,\n        onRemoveItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\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 [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n    const hasOnlyOneItem = values.length === 1;\n    const removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\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    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Stack spacing=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(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>\n                            {_header}\n                            <Stack spacing={spacing}>\n                                {items}\n                                {provided.placeholder}\n                                {_addButton}\n                                {_error}\n                            </Stack>\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["AddSize16Px","Box","Button","Group","Input","Stack","Tooltip","useComponentDefaultProps","useId","DragDropContext","Droppable","useControlledList","CollectionItem","useStyles","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Label","_description","Description","_error","Error","_header","items","map","item","onRemove","removable","addAllowed","_addButton","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/{Colllection.styles.js → Collection.styles.js}

@@ -12,4 +12,4 @@ export default createStyles(function(theme) {
     };
 });
 
-//# sourceMappingURL=Colllection.styles.js.map
+//# sourceMappingURL=Collection.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/Collection.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,gBAAgB;AAI3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ;GAAI"}

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

@@ -6,7 +6,7 @@ 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";
+import useStyles from "./Collection.styles";
 var RemoveButton = function(param) {
     var onClick = param.onClick;
     return /*#__PURE__*/ _jsx(ActionIcon, {

package/dist/esm/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 './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":"AAAA;;;;;AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAEzE,SAAQC,SAAS,QAAO,sBAAsB;AAE9C,OAAOC,eAAe,uBAAuB;AAa7C,IAAMC,eAED;QAAEC,gBAAAA;yBACH,KAACL;QAAWM,SAAQ;QAASD,SAASA;QAASE,OAAM;kBACjD,cAAA,KAACR;YAAeS,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;uBAAe,KAACL,4BAA0B;IAE9G,qBACI,MAACR;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,IAAMG,yBAA0F,gBAAgB;QAAdP,iBAAAA;IAC9F,IAAsBd,aAAAA,aAAfgB,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,qBAAO,KAACnB;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;kBAAIN;;AAChD;AAEA,IAAMQ,0BAA2F,gBAM3F;QALFC,cAAAA,OACAZ,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;SAAe,IAAI;IAEvF,qBACI,KAACZ;QAAUwB,OAAOA;QAAOC,aAAaD,MAAME,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,MAAC7B;gBACG8B,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BX,WAAWF,GAAGD,QAAQI,IAAI,EAAG,qBAACJ,QAAQe,YAAY,EAAGJ;;kCAErD,KAACpB,+CAAQmB,SAASM,eAAe;kCAC7B,cAAA,KAACrC;4BAAoBU,QAAQ;;;oBAEhCS;oBACAI;;;;;AAKrB;AAEA,OAAO,IAAMe,iBAA4E,iBAInF;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,KAACd,2CAA2Be;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,KAACZ,4CAA4Bc;IACxC,CAAC;IACD,qBAAO,KAAC1B,yCAAyB0B;AACrC,EAAE"}
+{"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 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":"AAAA;;;;;AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAEzE,SAAQC,SAAS,QAAO,sBAAsB;AAE9C,OAAOC,eAAe,sBAAsB;AAa5C,IAAMC,eAED;QAAEC,gBAAAA;yBACH,KAACL;QAAWM,SAAQ;QAASD,SAASA;QAASE,OAAM;kBACjD,cAAA,KAACR;YAAeS,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;uBAAe,KAACL,4BAA0B;IAE9G,qBACI,MAACR;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,IAAMG,yBAA0F,gBAAgB;QAAdP,iBAAAA;IAC9F,IAAsBd,aAAAA,aAAfgB,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,qBAAO,KAACnB;QAAMqB,WAAWF,GAAGD,QAAQI,IAAI;kBAAIN;;AAChD;AAEA,IAAMQ,0BAA2F,gBAM3F;QALFC,cAAAA,OACAZ,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBd,aAAAA,UAAU,IAAI,EAAE;QAACe,MAAM;QAAcF,QAAAA;IAAM,IAA1DG,UAAehB,WAAfgB,SAASC,KAAMjB,WAANiB;IAChB,IAAMC,eAAeN,aAAaD,yBAAW,KAACV;QAAaC,SAASS;SAAe,IAAI;IAEvF,qBACI,KAACZ;QAAUwB,OAAOA;QAAOC,aAAaD,MAAME,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,MAAC7B;gBACG8B,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BX,WAAWF,GAAGD,QAAQI,IAAI,EAAG,qBAACJ,QAAQe,YAAY,EAAGJ;;kCAErD,KAACpB,+CAAQmB,SAASM,eAAe;kCAC7B,cAAA,KAACrC;4BAAoBU,QAAQ;;;oBAEhCS;oBACAI;;;;;AAKrB;AAEA,OAAO,IAAMe,iBAA4E,iBAInF;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,KAACd,2CAA2Be;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,KAACZ,4CAA4Bc;IACxC,CAAC;IACD,qBAAO,KAAC1B,yCAAyB0B;AACrC,EAAE"}

package/package.json

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

package/src/components/collection/Collection.tsx

@@ -4,6 +4,8 @@ import {
     Button,
     DefaultProps,
     Group,
+    Input,
+    InputWrapperBaseProps,
     MantineNumberSize,
     Selectors,
     Stack,
@@ -13,12 +15,13 @@ import {
 import {useId} from '@mantine/hooks';
 import {ReactNode} from 'react';
 import {DragDropContext, Droppable} from 'react-beautiful-dnd';
-
 import {useControlledList} from '../../hooks';
 import {CollectionItem} from './CollectionItem';
-import useStyles from './Colllection.styles';
+import useStyles from './Collection.styles';
 
-interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+interface CollectionProps<T>
+    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,
+        DefaultProps<Selectors<typeof useStyles>> {
     /**
      * The default value each new item should have
      */
@@ -125,6 +128,12 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         addLabel,
         addDisabledTooltip,
         allowAdd,
+        label,
+        labelProps,
+        description,
+        descriptionProps,
+        error,
+        errorProps,
 
         // Style props
         classNames,
@@ -144,6 +153,24 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         onRemoveItem?.(index);
     };
 
+    const _label = label ? (
+        <Input.Label required={required} {...labelProps}>
+            {label}
+        </Input.Label>
+    ) : null;
+
+    const _description = description ? (
+        <Input.Description {...descriptionProps}>{description}</Input.Description>
+    ) : null;
+    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
+    const _header =
+        _label || _description ? (
+            <Stack spacing="xs">
+                {_label}
+                {_description}
+            </Stack>
+        ) : null;
+
     const items = values.map((item, index) => (
         <CollectionItem
             key={index}
@@ -189,10 +216,14 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
                         className={cx(classes.root, className)}
                         {...others}
                     >
-                        <Stack spacing={spacing}>
-                            {items}
-                            {provided.placeholder}
-                            {_addButton}
+                        <Stack>
+                            {_header}
+                            <Stack spacing={spacing}>
+                                {items}
+                                {provided.placeholder}
+                                {_addButton}
+                                {_error}
+                            </Stack>
                         </Stack>
                     </Box>
                 )}

package/src/components/collection/CollectionItem.tsx

@@ -3,7 +3,7 @@ import {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
 import {Draggable} from 'react-beautiful-dnd';
 
-import useStyles from './Colllection.styles';
+import useStyles from './Collection.styles';
 
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;

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

@@ -1 +0,0 @@
-{"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;;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}

package/dist/definitions/components/collection/Colllection.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colllection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Colllection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;AAE1C,wBASI"}

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

@@ -1 +0,0 @@
-{"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,gBAAgB;AAI3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ;GAAI"}