@coveord/plasma-mantine 48.18.0 → 48.21.0

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/dist/esm/components/modal-wizard/ModalWizard.js

@@ -3,13 +3,26 @@ import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Modal, Progress } from "@mantine/core";
+import { Box, Button, createStyles, Modal, Progress } from "@mantine/core";
 import { Children, useMemo, useState } from "react";
 import { StickyFooter } from "../sticky-footer";
 import { ModalWizardStep } from "./ModalWizardStep";
 import { Header } from "../header";
+var useStyles = createStyles(function() {
+    return {
+        modal: {
+            display: "flex",
+            flexDirection: "column"
+        },
+        body: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column"
+        }
+    };
+});
 export var ModalWizard = function(_param) {
-    var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, children = _param.children, modalProps = _object_without_properties(_param, [
+    var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, className = _param.className, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, modalProps = _object_without_properties(_param, [
         "cancelButtonLabel",
         "nextButtonLabel",
         "previousButtonLabel",
@@ -22,9 +35,18 @@ export var ModalWizard = function(_param) {
         "isDirty",
         "handleDirtyState",
         "classNames",
+        "className",
+        "styles",
+        "unstyled",
         "children"
     ]);
     var _currentStep_props, _currentStep_props_validateStep;
+    var _useStyles = useStyles(null, {
+        name: "ModalWizard",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), _useStyles_classes = _useStyles.classes, modal = _useStyles_classes.modal, body = _useStyles_classes.body, cx = _useStyles.cx;
     var _useState = _sliced_to_array(useState(0), 2), currentStepIndex = _useState[0], setCurrentStepIndex = _useState[1];
     var modalSteps = Children.toArray(children).filter(function(child) {
         return child.type === ModalWizardStep;
@@ -63,7 +85,10 @@ export var ModalWizard = function(_param) {
     ]);
     return /*#__PURE__*/ _jsxs(Modal, _object_spread_props(_object_spread({
         opened: opened,
-        classNames: classNames,
+        classNames: {
+            modal: cx(modal, classNames === null || classNames === void 0 ? void 0 : classNames.modal),
+            body: cx(body, classNames === null || classNames === void 0 ? void 0 : classNames.body)
+        },
         centered: true,
         title: /*#__PURE__*/ _jsx(Header, {
             docLink: currentStep.props.docLink,
@@ -81,41 +106,45 @@ export var ModalWizard = function(_param) {
                 value: getProgressMemo
             }),
             currentStep,
-            /*#__PURE__*/ _jsxs(StickyFooter, {
-                py: 0,
-                px: 0,
-                pt: "sm",
-                borderTop: true,
-                children: [
-                    /*#__PURE__*/ _jsx(Button, {
-                        name: isFirstStep ? cancelButtonLabel : previousButtonLabel,
-                        disabled: false,
-                        size: "sm",
-                        variant: "outline",
-                        onClick: function() {
-                            if (isFirstStep) {
-                                closeModalWizard();
-                            } else {
-                                onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious();
-                                setCurrentStepIndex(currentStepIndex - 1);
-                            }
-                        },
-                        children: isFirstStep ? cancelButtonLabel : previousButtonLabel
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        disabled: !isValid,
-                        size: "sm",
-                        onClick: function() {
-                            if (isLastStep) {
-                                onFinish ? onFinish() : onClose();
-                            } else {
-                                onNext === null || onNext === void 0 ? void 0 : onNext();
-                                setCurrentStepIndex(currentStepIndex + 1);
-                            }
-                        },
-                        children: isLastStep ? finishButtonLabel : nextButtonLabel
-                    })
-                ]
+            /*#__PURE__*/ _jsx(Box, {
+                sx: function(theme) {
+                    return {
+                        marginTop: "auto"
+                    };
+                },
+                children: /*#__PURE__*/ _jsxs(StickyFooter, {
+                    px: 0,
+                    pt: "sm",
+                    pb: 0,
+                    borderTop: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            name: isFirstStep ? cancelButtonLabel : previousButtonLabel,
+                            variant: "outline",
+                            onClick: function() {
+                                if (isFirstStep) {
+                                    closeModalWizard();
+                                } else {
+                                    onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious();
+                                    setCurrentStepIndex(currentStepIndex - 1);
+                                }
+                            },
+                            children: isFirstStep ? cancelButtonLabel : previousButtonLabel
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            disabled: !isValid,
+                            onClick: function() {
+                                if (isLastStep) {
+                                    onFinish ? onFinish() : onClose();
+                                } else {
+                                    onNext === null || onNext === void 0 ? void 0 : onNext();
+                                    setCurrentStepIndex(currentStepIndex + 1);
+                                }
+                            },
+                            children: isLastStep ? finishButtonLabel : nextButtonLabel
+                        })
+                    ]
+                })
             })
         ]
     }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Button, Modal, ModalProps, Progress} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\n\ninterface ModalWizardProps extends 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    children,\n    ...modalProps\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 numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).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    const isModalDirty = isDirty && isDirty();\n\n    const closeModalWizard = () => {\n        if (isModalDirty && handleDirtyState) {\n            handleDirtyState() && onClose?.();\n        } else {\n            onClose?.();\n        }\n    };\n\n    const getProgress = (currStepIndex: number) => {\n        const validSteps = modalSteps.filter(\n            (step, index) => step.props.countsAsProgress && index <= currStepIndex\n        ).length;\n        return (validSteps / numberOfStepsCountAsProgress) * 100;\n    };\n\n    const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n\n    return (\n        <Modal\n            opened={opened}\n            classNames={classNames}\n            centered\n            title={\n                <Header\n                    docLink={currentStep.props.docLink}\n                    description={\n                        typeof currentStep.props.description === 'function'\n                            ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n                            : currentStep.props.description\n                    }\n                    py={0}\n                    px={0}\n                >\n                    {typeof currentStep.props.title === 'function'\n                        ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n                        : currentStep.props.title}\n                </Header>\n            }\n            onClose={closeModalWizard}\n            {...modalProps}\n        >\n            {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n            {currentStep}\n            <StickyFooter py={0} px={0} pt=\"sm\" borderTop>\n                <Button\n                    name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                    disabled={false}\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onClick={() => {\n                        if (isFirstStep) {\n                            closeModalWizard();\n                        } else {\n                            onPrevious?.();\n                            setCurrentStepIndex(currentStepIndex - 1);\n                        }\n                    }}\n                >\n                    {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                </Button>\n\n                <Button\n                    disabled={!isValid}\n                    size=\"sm\"\n                    onClick={() => {\n                        if (isLastStep) {\n                            onFinish ? onFinish() : onClose();\n                        } else {\n                            onNext?.();\n                            setCurrentStepIndex(currentStepIndex + 1);\n                        }\n                    }}\n                >\n                    {isLastStep ? finishButtonLabel : nextButtonLabel}\n                </Button>\n            </StickyFooter>\n        </Modal>\n    );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Button","Modal","Progress","Children","useMemo","useState","StickyFooter","ModalWizardStep","Header","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","children","modalProps","currentStep","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","description","py","px","showProgressBar","color","size","value","pt","borderTop","name","disabled","variant","onClick","Step"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\n\nconst useStyles = createStyles(() => ({\n    modal: {\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\ninterface 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    className,\n    styles,\n    unstyled,\n    children,\n    ...modalProps\n}) => {\n    const {\n        classes: {modal, 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 numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).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    const isModalDirty = isDirty && isDirty();\n\n    const closeModalWizard = () => {\n        if (isModalDirty && handleDirtyState) {\n            handleDirtyState() && onClose?.();\n        } else {\n            onClose?.();\n        }\n    };\n\n    const getProgress = (currStepIndex: number) => {\n        const validSteps = modalSteps.filter(\n            (step, index) => step.props.countsAsProgress && index <= currStepIndex\n        ).length;\n        return (validSteps / numberOfStepsCountAsProgress) * 100;\n    };\n\n    const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n    return (\n        <Modal\n            opened={opened}\n            classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n            centered\n            title={\n                <Header\n                    docLink={currentStep.props.docLink}\n                    description={\n                        typeof currentStep.props.description === 'function'\n                            ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n                            : currentStep.props.description\n                    }\n                    py={0}\n                    px={0}\n                >\n                    {typeof currentStep.props.title === 'function'\n                        ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n                        : currentStep.props.title}\n                </Header>\n            }\n            onClose={closeModalWizard}\n            {...modalProps}\n        >\n            {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n            {currentStep}\n            <Box\n                sx={(theme) => ({\n                    marginTop: 'auto',\n                })}\n            >\n                <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n                    <Button\n                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                        variant=\"outline\"\n                        onClick={() => {\n                            if (isFirstStep) {\n                                closeModalWizard();\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 ? onFinish() : onClose();\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":["Box","Button","createStyles","Modal","Progress","Children","useMemo","useState","StickyFooter","ModalWizardStep","Header","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","description","py","px","showProgressBar","color","size","value","sx","theme","marginTop","pt","pb","borderTop","variant","onClick","disabled","Step"],"mappings":"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"}

package/dist/esm/components/modal-wizard/ModalWizardStep.js

@@ -1,9 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 var ModalWizardStep = function(param) {
     var children = param.children;
-    return /*#__PURE__*/ _jsx("div", {
-        children: children
-    });
+    return children;
 };
 ModalWizardStep.defaultProps = {
     showProgressBar: true,

package/dist/esm/components/modal-wizard/ModalWizardStep.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\n\nexport interface ModalWizardStepProps {\n    /**\n     * The title of the current step. The title can be dependent on the current step if needed\n     */\n    title?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * The description of the current step. The description can be dependent on the current step if needed\n     */\n    description?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * A link to the documentation for the current step\n     */\n    docLink: string;\n\n    /**\n     * A tooltip label for the docLink\n     */\n    docLinkTooltipLabel?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * A function to validate the current step, it determines if the next step should be enabled or not.\n     */\n    validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n    /**\n     * Show progress bar at this step\n     *\n     * @default true\n     */\n    showProgressBar?: boolean;\n\n    /**\n     * Does completion of current step count moves the progress bar\n     *\n     * @default true\n     */\n    countsAsProgress?: boolean;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => (\n    <div>{children}</div>\n);\n\nModalWizardStep.defaultProps = {\n    showProgressBar: true,\n    countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","div","defaultProps","showProgressBar","countsAsProgress"],"mappings":"AAAA;AA6CA,IAAMA,kBAA8E;QAAEC,iBAAAA;yBAClF,KAACC;kBAAKD;;;AAGVD,gBAAgBG,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B;AAEA,SAAQL,eAAe,GAAE"}
+{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\n\nexport interface ModalWizardStepProps {\n    /**\n     * The title of the current step. The title can be dependent on the current step if needed\n     */\n    title?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * The description of the current step. The description can be dependent on the current step if needed\n     */\n    description?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * A link to the documentation for the current step\n     */\n    docLink: string;\n\n    /**\n     * A tooltip label for the docLink\n     */\n    docLinkTooltipLabel?: string | ReactElement | DependsOnStep<string | ReactElement>;\n\n    /**\n     * A function to validate the current step, it determines if the next step should be enabled or not.\n     */\n    validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n    /**\n     * Show progress bar at this step\n     *\n     * @default true\n     */\n    showProgressBar?: boolean;\n\n    /**\n     * Does completion of current step count moves the progress bar\n     *\n     * @default true\n     */\n    countsAsProgress?: boolean;\n    children: ReactElement<any, any>;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => children;\n\nModalWizardStep.defaultProps = {\n    showProgressBar: true,\n    countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","defaultProps","showProgressBar","countsAsProgress"],"mappings":"AA8CA,IAAMA,kBAA8E;QAAEC,iBAAAA;WAAcA;;AAEpGD,gBAAgBE,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B;AAEA,SAAQJ,eAAe,GAAE"}

package/dist/esm/components/sticky-footer/StickyFooter.js

@@ -29,7 +29,8 @@ export var StickyFooter = function(_param) {
                 children: /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
                     position: "right",
                     spacing: "xs",
-                    py: "md",
+                    pt: "md",
+                    pb: "md",
                     px: "xl"
                 }, others), {
                     children: children

package/dist/esm/components/sticky-footer/StickyFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n    footer: {\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        backgroundColor: 'white',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n    borderTop,\n    children,\n    ...others\n}) => {\n    const {classes} = useStyles();\n\n    return (\n        <>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Box className={classes.footer}>\n                <Group position=\"right\" spacing=\"xs\" py=\"md\" px=\"xl\" {...others}>\n                    {children}\n                </Group>\n            </Box>\n        </>\n    );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,GAAG,EAAEC,YAAY,EAAgBC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AAU9E,IAAMC,YAAYH,aAAa;WAAO;QAClCI,QAAQ;YACJC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;IACJ;;AAEA,OAAO,IAAMC,eAAwE,iBAI/E;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAM,AAACE,UAAWV,YAAXU;IAEP,qBACI;;YACKH,0BAAY,KAACT;gBAAQa,MAAK;iBAAU,IAAI;0BACzC,KAACf;gBAAIgB,WAAWF,QAAQT,MAAM;0BAC1B,cAAA,KAACF;oBAAMG,UAAS;oBAAQW,SAAQ;oBAAKC,IAAG;oBAAKC,IAAG;mBAASN;8BACpDD;;;;;AAKrB,EAAE"}
+{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n    footer: {\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        backgroundColor: 'white',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n    borderTop,\n    children,\n    ...others\n}) => {\n    const {classes} = useStyles();\n\n    return (\n        <>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Box className={classes.footer}>\n                <Group position=\"right\" spacing=\"xs\" pt=\"md\" pb=\"md\" px=\"xl\" {...others}>\n                    {children}\n                </Group>\n            </Box>\n        </>\n    );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","pt","pb","px"],"mappings":"AAAA;;;;AAAA,SAAQA,GAAG,EAAEC,YAAY,EAAgBC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AAU9E,IAAMC,YAAYH,aAAa;WAAO;QAClCI,QAAQ;YACJC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;IACJ;;AAEA,OAAO,IAAMC,eAAwE,iBAI/E;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAM,AAACE,UAAWV,YAAXU;IAEP,qBACI;;YACKH,0BAAY,KAACT;gBAAQa,MAAK;iBAAU,IAAI;0BACzC,KAACf;gBAAIgB,WAAWF,QAAQT,MAAM;0BAC1B,cAAA,KAACF;oBAAMG,UAAS;oBAAQW,SAAQ;oBAAKC,IAAG;oBAAKC,IAAG;oBAAKC,IAAG;mBAASP;8BAC5DD;;;;;AAKrB,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.18.0",
+  "version": "48.21.0",
   "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;