@coveord/plasma-mantine 48.28.1 → 49.0.0

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

@@ -12,15 +12,13 @@ var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.
 var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
 var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
 var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
 var _reactBeautifulDnd = require("react-beautiful-dnd");
-var _hooks1 = require("../../hooks");
-var _collectionItem = require("./CollectionItem");
 var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
+var _collectionItem = require("./CollectionItem");
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -30,12 +28,13 @@ var defaultProps = {
     required: false
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, defaultValue = _useComponentDefaultProps.defaultValue, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, 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, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _objectWithoutProperties(_useComponentDefaultProps, [
         "value",
-        "defaultValue",
         "onChange",
         "onRemoveItem",
+        "onReorderItem",
+        "onInsertItem",
         "disabled",
         "draggable",
         "children",
@@ -63,18 +62,14 @@ var Collection = function(props) {
         unstyled: unstyled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
     var collectionID = (0, _hooks.useId)("dnd-droppable");
-    var _useControlledList = _slicedToArray((0, _hooks1.useControlledList)({
-        value: value,
-        onChange: onChange,
-        defaultValue: defaultValue
-    }), 2), values = _useControlledList[0], _useControlledList_ = _useControlledList[1], append = _useControlledList_.append, remove = _useControlledList_.remove, reorder = _useControlledList_.reorder;
-    var hasOnlyOneItem = values.length === 1;
-    var removeItem = function(index) {
-        return function() {
-            remove(index);
-            onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
-        };
-    };
+    var hasOnlyOneItem = value.length === 1;
+    /**
+     * Enforcing onChange when the value is modified will make sure the errors are carried through.
+     */ (0, _hooks.useDidUpdate)(function() {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [
+        JSON.stringify(value)
+    ]);
     var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
         required: required
     }, labelProps), {
@@ -93,19 +88,22 @@ var Collection = function(props) {
             _description
         ]
     }) : null;
-    var items = values.map(function(item, index) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
+    var items = value.map(function(item, index) {
+        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
             disabled: disabled,
             draggable: draggable,
             index: index,
-            onRemove: removeItem(index),
+            onRemove: function() {
+                return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
+            },
             styles: styles,
             removable: !(required && hasOnlyOneItem),
             children: children(item, index)
         }, index);
     });
     var _allowAdd;
-    var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
+    var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
+    var _value_length;
     var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
             label: addDisabledTooltip,
@@ -117,7 +115,7 @@ var Collection = function(props) {
                         height: 16
                     }),
                     onClick: function() {
-                        return append(newItem);
+                        return onInsertItem(newItem, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
                     },
                     disabled: !addAllowed,
                     children: addLabel
@@ -128,7 +126,7 @@ var Collection = function(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactBeautifulDnd.DragDropContext, {
         onDragEnd: function(param) {
             var destination = param.destination, source = param.source;
-            return reorder({
+            return onReorderItem({
                 from: source.index,
                 to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
             });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    Button,\n    DefaultProps,\n    Group,\n    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            <Box mb=\"sm\">\n                {_label}\n                {_description}\n            </Box>\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                        {_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","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Input","Label","_description","Description","_error","Error","_header","Box","mb","items","map","item","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":"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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 {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 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":"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"}

package/dist/cjs/form/FormProvider.js

@@ -0,0 +1,38 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createFormContext", {
+    enumerable: true,
+    get: function() {
+        return createFormContext;
+    }
+});
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _useForm = require("./useForm");
+function createFormContext() {
+    var FormProvider = function FormProvider(param) {
+        var form = param.form, children = param.children;
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(FormContext.Provider, {
+            value: form,
+            children: children
+        });
+    };
+    var useFormContext = function useFormContext() {
+        var ctx = (0, _react.useContext)(FormContext);
+        if (!ctx) {
+            throw new Error("useFormContext was called outside of FormProvider context");
+        }
+        return ctx;
+    };
+    var FormContext = /*#__PURE__*/ (0, _react.createContext)(null);
+    return [
+        FormProvider,
+        useFormContext,
+        _useForm.useForm
+    ];
+}
+
+//# sourceMappingURL=FormProvider.js.map

package/dist/cjs/form/FormProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/FormProvider.tsx"],"sourcesContent":["/* eslint-disable prefer-arrow/prefer-arrow-functions */\nimport {_TransformValues, UseForm, UseFormReturnType} from '@mantine/form/lib/types';\nimport React, {createContext, useContext} from 'react';\n\nimport {useForm} from './useForm';\n\nexport interface FormProviderProps<Form> {\n    form: Form;\n    children: React.ReactNode;\n}\n\nexport function createFormContext<\n    Values,\n    TransformValues extends _TransformValues<Values> = (values: Values) => Values\n>() {\n    type Form = UseFormReturnType<Values, TransformValues>;\n\n    const FormContext = createContext<Form>(null);\n\n    function FormProvider({form, children}: FormProviderProps<Form>) {\n        return <FormContext.Provider value={form}>{children}</FormContext.Provider>;\n    }\n\n    function useFormContext() {\n        const ctx = useContext(FormContext);\n        if (!ctx) {\n            throw new Error('useFormContext was called outside of FormProvider context');\n        }\n\n        return ctx;\n    }\n\n    return [FormProvider, useFormContext, useForm] as [\n        React.FC<FormProviderProps<Form>>,\n        () => Form,\n        UseForm<Values, TransformValues>\n    ];\n}\n"],"names":["createFormContext","FormProvider","form","children","FormContext","Provider","value","useFormContext","ctx","useContext","Error","createContext","useForm"],"mappings":"AAAA,sDAAsD,GACtD;;;;+BAUgBA;;;eAAAA;;;;;2DAT+B;uBAEzB;AAOf,SAASA,oBAGZ;QAKSC,eAAT,SAASA,aAAa,KAAyC,EAAE;YAA1CC,OAAD,MAACA,MAAMC,WAAP,MAAOA;QACzB,qBAAO,qBAACC,YAAYC,QAAQ;YAACC,OAAOJ;sBAAOC;;IAC/C;QAESI,iBAAT,SAASA,iBAAiB;QACtB,IAAMC,MAAMC,IAAAA,iBAAU,EAACL;QACvB,IAAI,CAACI,KAAK;YACN,MAAM,IAAIE,MAAM,6DAA6D;QACjF,CAAC;QAED,OAAOF;IACX;IAbA,IAAMJ,4BAAcO,IAAAA,oBAAa,EAAO,IAAI;IAe5C,OAAO;QAACV;QAAcM;QAAgBK,gBAAO;KAAC;AAKlD"}

package/dist/cjs/form/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/index.ts"],"sourcesContent":["export * from './useForm';\nexport * from './FormProvider';\n"],"names":[],"mappings":"AAAA;;;;;oBAAc;oBACA"}

package/dist/cjs/form/useForm.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useForm", {
+    enumerable: true,
+    get: function() {
+        return useForm;
+    }
+});
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _form = require("@mantine/form");
+var useForm = function(options) {
+    var form = (0, _form.useForm)(options);
+    var getInputProps = function(path) {
+        var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, _ref_type = _ref.type, type = _ref_type === void 0 ? "input" : _ref_type, _ref_withError = _ref.withError, withError = _ref_withError === void 0 ? type === "input" : _ref_withError, _ref_withFocus = _ref.withFocus, withFocus = _ref_withFocus === void 0 ? true : _ref_withFocus;
+        var originalPayload = form.getInputProps(path, {
+            type: type,
+            withError: withError,
+            withFocus: withFocus
+        });
+        if (Array.isArray(originalPayload.value)) {
+            return _objectSpreadProps(_objectSpread({}, originalPayload), {
+                onReorderItem: function(payload) {
+                    return form.reorderListItem(path, payload);
+                },
+                onRemoveItem: function(index) {
+                    return form.removeListItem(path, index);
+                },
+                onInsertItem: function(valueToInsert, index) {
+                    return form.insertListItem(path, valueToInsert, index);
+                }
+            });
+        }
+        return originalPayload;
+    };
+    return _objectSpreadProps(_objectSpread({}, form), {
+        getInputProps: getInputProps
+    });
+};
+
+//# sourceMappingURL=useForm.js.map

package/dist/cjs/form/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/useForm.ts"],"sourcesContent":["import {useForm as useMantineForm} from '@mantine/form';\nimport {GetInputProps} from '@mantine/form/lib/types';\n\nexport const useForm: typeof useMantineForm = (options) => {\n    const form = useMantineForm(options);\n\n    const getInputProps: GetInputProps<Record<string, unknown>> = (\n        path,\n        {type = 'input', withError = type === 'input', withFocus = true} = {}\n    ) => {\n        const originalPayload = form.getInputProps(path, {type, withError, withFocus});\n        if (Array.isArray(originalPayload.value)) {\n            return {\n                ...originalPayload,\n                onReorderItem: (payload: Record<'from' | 'to', number>) => form.reorderListItem(path, payload),\n                onRemoveItem: (index: number) => form.removeListItem(path, index),\n                onInsertItem: (valueToInsert: unknown, index: number) =>\n                    form.insertListItem(path, valueToInsert, index),\n            };\n        }\n\n        return originalPayload;\n    };\n\n    return {...form, getInputProps};\n};\n"],"names":["useForm","options","form","useMantineForm","getInputProps","path","type","withError","withFocus","originalPayload","Array","isArray","value","onReorderItem","payload","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":"AAAA;;;;+BAGaA;;;eAAAA;;;;;oBAH2B;AAGjC,IAAMA,UAAiC,SAACC,SAAY;IACvD,IAAMC,OAAOC,IAAAA,aAAc,EAACF;IAE5B,IAAMG,gBAAwD,SAC1DC,MAEC;oFADkE,CAAC,oBAAnEC,MAAAA,8BAAO,2CAASC,WAAAA,wCAAYD,SAAS,gDAASE,WAAAA,wCAAY,IAAI;QAE/D,IAAMC,kBAAkBP,KAAKE,aAAa,CAACC,MAAM;YAACC,MAAAA;YAAMC,WAAAA;YAAWC,WAAAA;QAAS;QAC5E,IAAIE,MAAMC,OAAO,CAACF,gBAAgBG,KAAK,GAAG;YACtC,OAAO,qCACAH;gBACHI,eAAe,SAACC;2BAA2CZ,KAAKa,eAAe,CAACV,MAAMS;;gBACtFE,cAAc,SAACC;2BAAkBf,KAAKgB,cAAc,CAACb,MAAMY;;gBAC3DE,cAAc,SAACC,eAAwBH;2BACnCf,KAAKmB,cAAc,CAAChB,MAAMe,eAAeH;;;QAErD,CAAC;QAED,OAAOR;IACX;IAEA,OAAO,qCAAIP;QAAME,eAAAA;;AACrB"}

package/dist/cjs/index.js

@@ -20,15 +20,22 @@ _export(exports, {
     },
     Modal: function() {
         return _components.Modal;
+    },
+    useForm: function() {
+        return _form.useForm;
+    },
+    createFormContext: function() {
+        return _form.createFormContext;
     }
 });
 var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("@mantine/carousel"), exports);
 _exportStar(require("@mantine/core"), exports);
-_exportStar(require("@mantine/form"), exports);
 _exportStar(require("@mantine/hooks"), exports);
 var _tableCore = require("@tanstack/table-core");
 var _components = _exportStar(require("./components"), exports);
+_exportStar(require("@mantine/form"), exports);
+var _form = require("./form");
 _exportStar(require("./theme"), exports);
 
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport * from '@mantine/form';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\n// explicitly overriding mantine components\nexport {Header, Table, type HeaderProps, Modal} from './components';\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["createColumnHelper","Header","Table","Modal"],"mappings":"AAAA;;;;;;;;;;;IASQA,kBAAkB;eAAlBA,6BAAkB;;IAGlBC,MAAM;eAANA,kBAAM;;IAAEC,KAAK;eAALA,iBAAK;;IAAoBC,KAAK;eAALA,iBAAK;;;;oBARhC;oBACA;oBACA;oBAEA;yBACmC;sCACnC;oBAGA"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\n// explicitly overriding mantine components\nexport {Header, Table, type HeaderProps, Modal} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["createColumnHelper","Header","Table","Modal","useForm","createFormContext"],"mappings":"AAAA;;;;;;;;;;;IAQQA,kBAAkB;eAAlBA,6BAAkB;;IAIlBC,MAAM;eAANA,kBAAM;;IAAEC,KAAK;eAALA,iBAAK;;IAAoBC,KAAK;eAALA,iBAAK;;IACtCC,OAAO;eAAPA,aAAO;;IAAEC,iBAAiB;eAAjBA,uBAAiB;;;;oBATpB;oBACA;oBAEA;yBACmC;sCACnC;oBACA;oBAG2B;oBAE3B"}

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

@@ -1,4 +1,5 @@
 import { DefaultProps, InputWrapperBaseProps, MantineNumberSize, Selectors } from '@mantine/core';
+import { ReorderPayload } from '@mantine/form/lib/types';
 import { ReactNode } from 'react';
 import useStyles from './Collection.styles';
 interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>, DefaultProps<Selectors<typeof useStyles>> {
@@ -19,10 +20,6 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      * @default []
      */
     value?: T[];
-    /**
-     * The initial items of the collection (for uncontrolled usage only)
-     */
-    defaultValue?: T[];
     /**
      * Unused, has no effect
      */
@@ -39,6 +36,19 @@ interface CollectionProps<T> extends Omit<InputWrapperBaseProps, 'inputContainer
      * @param itemIndex The index of the item that was removed
      */
     onRemoveItem?: (itemIndex: number) => void;
+    /**
+     * Function that gets called whenever a collection item needs to be reordered
+     *
+     * @param payload The origin and destination index of the item to reorder
+     */
+    onReorderItem?: (payload: ReorderPayload) => void;
+    /**
+     * Function that gets called when a new item needs to be added to the collection
+     *
+     * @param value The the value of the item to insert
+     * @param index The index of the new item to insert
+     */
+    onInsertItem?: (value: T, index: number) => void;
     /**
      * Whether the collection should have drag and drop behavior enabled
      *

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

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

package/dist/definitions/form/FormProvider.d.ts

@@ -0,0 +1,8 @@
+import { _TransformValues, UseForm, UseFormReturnType } from '@mantine/form/lib/types';
+import React from 'react';
+export interface FormProviderProps<Form> {
+    form: Form;
+    children: React.ReactNode;
+}
+export declare function createFormContext<Values, TransformValues extends _TransformValues<Values> = (values: Values) => Values>(): [React.FC<FormProviderProps<UseFormReturnType<Values, TransformValues>>>, () => UseFormReturnType<Values, TransformValues>, UseForm<Values, TransformValues>];
+//# sourceMappingURL=FormProvider.d.ts.map

package/dist/definitions/form/FormProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormProvider.d.ts","sourceRoot":"","sources":["../../../src/form/FormProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACnC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAC7B,MAAM,EACN,eAAe,SAAS,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,mKAwBhF"}

package/dist/definitions/form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useForm';
+export * from './FormProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/definitions/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}

package/dist/definitions/form/useForm.d.ts

@@ -0,0 +1,3 @@
+import { useForm as useMantineForm } from '@mantine/form';
+export declare const useForm: typeof useMantineForm;
+//# sourceMappingURL=useForm.d.ts.map

package/dist/definitions/form/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../src/form/useForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,eAAe,CAAC;AAGxD,eAAO,MAAM,OAAO,EAAE,OAAO,cAsB5B,CAAC"}

package/dist/definitions/index.d.ts

@@ -2,12 +2,13 @@ import { Tuple } from '@mantine/core';
 import { PlasmaColors } from './theme/PlasmaColors';
 export * from '@mantine/carousel';
 export * from '@mantine/core';
-export * from '@mantine/form';
 export type { FormValidateInput } from '@mantine/form/lib/types';
 export * from '@mantine/hooks';
 export { createColumnHelper, type ColumnDef } from '@tanstack/table-core';
 export * from './components';
+export * from '@mantine/form';
 export { Header, Table, type HeaderProps, Modal } from './components';
+export { useForm, createFormContext } from './form';
 export * from './theme';
 declare module '@mantine/core' {
     interface MantineThemeColorsOverride {

package/dist/definitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC/D,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAC,kBAAkB,EAAE,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AACxE,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,EAAC,MAAM,cAAc,CAAC;AACpE,cAAc,SAAS,CAAC;AAExB,OAAO,QAAQ,eAAe,CAAC;IAC3B,UAAiB,0BAA0B;QAEvC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;KAChF;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC/D,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAC,kBAAkB,EAAE,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AACxE,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,EAAC,MAAM,cAAc,CAAC;AACpE,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAElD,cAAc,SAAS,CAAC;AAExB,OAAO,QAAQ,eAAe,CAAC;IAC3B,UAAiB,0BAA0B;QAEvC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;KAChF;CACJ"}

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

@@ -1,15 +1,13 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AddSize16Px } from "@coveord/plasma-react-icons";
 import { Box, Button, Group, Input, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
-import { useId } from "@mantine/hooks";
+import { useDidUpdate, useId } from "@mantine/hooks";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { useControlledList } from "../../hooks";
-import { CollectionItem } from "./CollectionItem";
 import useStyles from "./Collection.styles";
+import { CollectionItem } from "./CollectionItem";
 var defaultProps = {
     draggable: false,
     addLabel: "Add item",
@@ -19,12 +17,13 @@ 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, 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, 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",
         "onChange",
         "onRemoveItem",
+        "onReorderItem",
+        "onInsertItem",
         "disabled",
         "draggable",
         "children",
@@ -52,18 +51,14 @@ export var Collection = function(props) {
         unstyled: unstyled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
     var collectionID = useId("dnd-droppable");
-    var _useControlledList = _sliced_to_array(useControlledList({
-        value: value,
-        onChange: onChange,
-        defaultValue: defaultValue
-    }), 2), values = _useControlledList[0], _useControlledList_ = _useControlledList[1], append = _useControlledList_.append, remove = _useControlledList_.remove, reorder = _useControlledList_.reorder;
-    var hasOnlyOneItem = values.length === 1;
-    var removeItem = function(index) {
-        return function() {
-            remove(index);
-            onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
-        };
-    };
+    var hasOnlyOneItem = value.length === 1;
+    /**
+     * Enforcing onChange when the value is modified will make sure the errors are carried through.
+     */ useDidUpdate(function() {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, [
+        JSON.stringify(value)
+    ]);
     var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
         required: required
     }, labelProps), {
@@ -82,19 +77,22 @@ export var Collection = function(props) {
             _description
         ]
     }) : null;
-    var items = values.map(function(item, index) {
-        return /*#__PURE__*/ _jsx(CollectionItem, {
+    var items = value.map(function(item, index) {
+        /*#__PURE__*/ return _jsx(CollectionItem, {
             disabled: disabled,
             draggable: draggable,
             index: index,
-            onRemove: removeItem(index),
+            onRemove: function() {
+                return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
+            },
             styles: styles,
             removable: !(required && hasOnlyOneItem),
             children: children(item, index)
         }, index);
     });
     var _allowAdd;
-    var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
+    var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
+    var _value_length;
     var _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
         children: /*#__PURE__*/ _jsx(Tooltip, {
             label: addDisabledTooltip,
@@ -106,7 +104,7 @@ export var Collection = function(props) {
                         height: 16
                     }),
                     onClick: function() {
-                        return append(newItem);
+                        return onInsertItem(newItem, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
                     },
                     disabled: !addAllowed,
                     children: addLabel
@@ -117,7 +115,7 @@ export var Collection = function(props) {
     return /*#__PURE__*/ _jsx(DragDropContext, {
         onDragEnd: function(param) {
             var destination = param.destination, source = param.source;
-            return reorder({
+            return onReorderItem({
                 from: source.index,
                 to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
             });

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    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            <Box mb=\"sm\">\n                {_label}\n                {_description}\n            </Box>\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                        {_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","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","mb","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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"}
+{"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 {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 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","Button","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","useId","DragDropContext","Droppable","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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"}

package/dist/esm/form/FormProvider.js

@@ -0,0 +1,27 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */ import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+import { useForm } from "./useForm";
+export function createFormContext() {
+    var FormProvider = function FormProvider(param) {
+        var form = param.form, children = param.children;
+        return /*#__PURE__*/ _jsx(FormContext.Provider, {
+            value: form,
+            children: children
+        });
+    };
+    var useFormContext = function useFormContext() {
+        var ctx = useContext(FormContext);
+        if (!ctx) {
+            throw new Error("useFormContext was called outside of FormProvider context");
+        }
+        return ctx;
+    };
+    var FormContext = /*#__PURE__*/ createContext(null);
+    return [
+        FormProvider,
+        useFormContext,
+        useForm
+    ];
+}
+
+//# sourceMappingURL=FormProvider.js.map