@coveord/plasma-mantine 49.1.0 → 49.1.1

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

@@ -29,7 +29,7 @@ var defaultProps = {
     required: false
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
+    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _objectWithoutProperties(_useComponentDefaultProps, [
         "value",
         "onChange",
@@ -47,6 +47,7 @@ var Collection = function(props) {
         "allowAdd",
         "label",
         "labelProps",
+        "withAsterisk",
         "description",
         "descriptionProps",
         "error",
@@ -71,8 +72,9 @@ var Collection = function(props) {
     }, [
         JSON.stringify(value)
     ]);
+    var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
     var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
-        required: required
+        required: isRequired
     }, labelProps), {
         children: label
     })) : null;
@@ -82,8 +84,7 @@ var Collection = function(props) {
     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.Box, {
-        mb: "sm",
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             _label,
             _description

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const _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            <Box mb=\"sm\">\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const items = value.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","_label","Input","Label","_description","Description","_error","Error","_header","Box","mb","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"AAAA;;;;+BA6HaA;;;eAAAA;;;;;;;;gCA7Ha;oBAYnB;qBAE2B;iCAEO;sBAEpB;qEACC;8BACO;AAgG7B,IAAMC,eAAkD;IACpDC,WAAW,KAAK;IAChBC,UAAU;IACVC,oBAAoB;IACpBC,UAAU,KAAK;IACfC,SAAS;IACTC,UAAU,KAAK;AACnB;AAEO,IAAMP,aAAa,SAAKQ,OAA8B;IACzD,IA6BIC,4BAAAA,IAAAA,8BAAwB,EAAC,cAAcR,cAAoCO,QA5B3EE,QA4BAD,0BA5BAC,OACAC,WA2BAF,0BA3BAE,UACAC,eA0BAH,0BA1BAG,cACAC,gBAyBAJ,0BAzBAI,eACAC,eAwBAL,0BAxBAK,cACAT,WAuBAI,0BAvBAJ,UACAH,YAsBAO,0BAtBAP,WACAa,WAqBAN,0BArBAM,UACAT,UAoBAG,0BApBAH,SACAC,WAmBAE,0BAnBAF,UACAS,UAkBAP,0BAlBAO,SACAb,WAiBAM,0BAjBAN,UACAC,qBAgBAK,0BAhBAL,oBACAa,WAeAR,0BAfAQ,UACAC,QAcAT,0BAdAS,OACAC,aAaAV,0BAbAU,YACAC,cAYAX,0BAZAW,aACAC,mBAWAZ,0BAXAY,kBACAC,QAUAb,0BAVAa,OACAC,aASAd,0BATAc,YAEA,cAAc;IACdC,aAMAf,0BANAe,YACAC,YAKAhB,0BALAgB,WACAC,SAIAjB,0BAJAiB,QACAC,WAGAlB,0BAHAkB,UAEGC,kCACHnB;QA5BAC;QACAC;QACAC;QACAC;QACAC;QACAT;QACAH;QACAa;QACAT;QACAC;QACAS;QACAb;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAC;QACAC;QACAC;QACAC;;IAIJ,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACL,YAAAA;QAAYM,MAAM;QAAcJ,QAAAA;QAAQC,UAAAA;IAAQ,IAAhFI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeC,IAAAA,YAAK,EAAC;IAE3B,IAAMC,iBAAiBzB,MAAM0B,MAAM,KAAK;IAExC;;KAEC,GACDC,IAAAA,mBAAY,EAAC,WAAM;QACf1B,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWD;IACf,GAAG;QAAC4B,KAAKC,SAAS,CAAC7B;KAAO;IAE1B,IAAM8B,SAAStB,sBACX,qBAACuB,WAAK,CAACC,KAAK;QAACnC,UAAUA;OAAcY;kBAChCD;UAEL,IAAI;IAER,IAAMyB,eAAevB,4BACjB,qBAACqB,WAAK,CAACG,WAAW,uCAAKvB;kBAAmBD;UAC1C,IAAI;IACR,IAAMyB,SAASvB,sBAAQ,qBAACmB,WAAK,CAACK,KAAK,uCAAKvB;kBAAaD;UAAuB,IAAI;IAChF,IAAMyB,UACFP,UAAUG,6BACN,sBAACK,SAAG;QAACC,IAAG;;YACHT;YACAG;;SAEL,IAAI;IAEZ,IAAMO,QAAQxC,MAAMyC,GAAG,CAAC,SAACC,MAAMC;sBAC3B,OAAA,qBAACC,8BAAc;YAEXjD,UAAUA;YACVH,WAAWA;YACXmD,OAAOA;YACPE,UAAU;gBAAM3C,OAAAA,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeyC;;YAC/B3B,QAAQA;YACR8B,WAAW,CAAEjD,CAAAA,YAAY4B,cAAa;sBAErCpB,SAASqC,MAAMC;WARXA;;QAYMpC;IAAnB,IAAMwC,aAAaxC,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWP,oBAAXO,uBAAAA,YAAqB,IAAI;QASaP;IAPzD,IAAMgD,aAAarD,WAAW,IAAI,iBAC9B,qBAACsD,WAAK;kBACF,cAAA,qBAACC,aAAO;YAAC1C,OAAOd;YAAoBC,UAAUoD;sBAC1C,cAAA,qBAACT,SAAG;0BACA,cAAA,qBAACa,cAAM;oBACHC,SAAQ;oBACRC,wBAAU,qBAACC,6BAAW;wBAACC,QAAQ;;oBAC/BC,SAAS;wBAAMpD,OAAAA,aAAaE,SAASN,CAAAA,gBAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAO0B,MAAM,cAAb1B,2BAAAA,gBAAiB,CAAC;;oBACvDL,UAAU,CAACoD;8BAEVtD;;;;MAKpB;IAED,qBACI,qBAACgE,kCAAe;QACZC,WAAW;gBAAEC,oBAAAA,aAAaC,eAAAA;YAAYzD,OAAAA,cAAc;gBAAC0D,MAAMD,OAAOjB,KAAK;gBAAEmB,IAAIH,CAAAA,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAahB,KAAK,AAAD,KAAK;YAAC;;kBAEpG,cAAA,qBAACoB,4BAAS;YAACC,WAAU;YAAWC,aAAa1C;sBACxC,SAAC2C;qCACE,sBAAC5B,SAAG,wEACI4B,SAASC,cAAc;oBAC3BC,KAAKF,SAASG,QAAQ;oBACtBtD,WAAWO,GAAGD,QAAQiD,IAAI,EAAEvD;oBACxBG;;wBAEHmB;sCACD,sBAACkC,WAAK;4BAAC3E,SAASA;;gCACX4C;gCACA0B,SAASM,WAAW;gCACpBxB;gCACAb;;;;;;;;AAO7B"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const items = value.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}

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,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAsHtB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAwHtB,CAAC"}

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

@@ -1,7 +1,7 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AddSize16Px } from "@coveord/plasma-react-icons";
 import { Box, Group, Input, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
 import { useDidUpdate, useId } from "@mantine/hooks";
@@ -18,7 +18,7 @@ var defaultProps = {
     required: false
 };
 export var Collection = function(props) {
-    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
+    var _useComponentDefaultProps = useComponentDefaultProps("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties(_useComponentDefaultProps, [
         "value",
         "onChange",
@@ -36,6 +36,7 @@ export var Collection = function(props) {
         "allowAdd",
         "label",
         "labelProps",
+        "withAsterisk",
         "description",
         "descriptionProps",
         "error",
@@ -60,8 +61,9 @@ export var Collection = function(props) {
     }, [
         JSON.stringify(value)
     ]);
+    var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
     var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
-        required: required
+        required: isRequired
     }, labelProps), {
         children: label
     })) : null;
@@ -71,8 +73,7 @@ export var Collection = function(props) {
     var _error = error ? /*#__PURE__*/ _jsx(Input.Error, _object_spread_props(_object_spread({}, errorProps), {
         children: error
     })) : null;
-    var _header = _label || _description ? /*#__PURE__*/ _jsxs(Box, {
-        mb: "sm",
+    var _header = _label || _description ? /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             _label,
             _description

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    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const _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            <Box mb=\"sm\">\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const items = value.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["AddSize16Px","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","useId","DragDropContext","Droppable","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","hasOnlyOneItem","length","JSON","stringify","_label","Label","_description","Description","_error","Error","_header","mb","items","map","item","index","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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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The the value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const items = value.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["AddSize16Px","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","useId","DragDropContext","Droppable","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","items","map","item","index","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/package.json

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

package/src/components/collection/Collection.tsx

@@ -141,6 +141,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         allowAdd,
         label,
         labelProps,
+        withAsterisk,
         description,
         descriptionProps,
         error,
@@ -166,8 +167,9 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         onChange?.(value);
     }, [JSON.stringify(value)]);
 
+    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
     const _label = label ? (
-        <Input.Label required={required} {...labelProps}>
+        <Input.Label required={isRequired} {...labelProps}>
             {label}
         </Input.Label>
     ) : null;
@@ -178,10 +180,10 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
     const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
     const _header =
         _label || _description ? (
-            <Box mb="sm">
+            <>
                 {_label}
                 {_description}
-            </Box>
+            </>
         ) : null;
 
     const items = value.map((item, index) => (