@coveord/plasma-mantine 48.28.3 → 49.0.0

package/dist/esm/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":["React","createContext","useContext","useForm","createFormContext","FormProvider","form","children","FormContext","Provider","value","useFormContext","ctx","Error"],"mappings":"AAAA,sDAAsD,GACtD;AACA,OAAOA,SAAQC,aAAa,EAAEC,UAAU,QAAO,QAAQ;AAEvD,SAAQC,OAAO,QAAO,YAAY;AAOlC,OAAO,SAASC,oBAGZ;QAKSC,eAAT,SAASA,aAAa,KAAyC,EAAE;YAA1CC,OAAD,MAACA,MAAMC,WAAP,MAAOA;QACzB,qBAAO,KAACC,YAAYC,QAAQ;YAACC,OAAOJ;sBAAOC;;IAC/C;QAESI,iBAAT,SAASA,iBAAiB;QACtB,IAAMC,MAAMV,WAAWM;QACvB,IAAI,CAACI,KAAK;YACN,MAAM,IAAIC,MAAM,6DAA6D;QACjF,CAAC;QAED,OAAOD;IACX;IAbA,IAAMJ,4BAAcP,cAAoB,IAAI;IAe5C,OAAO;QAACI;QAAcM;QAAgBR;KAAQ;AAKlD,CAAC"}

package/dist/esm/form/index.js

@@ -0,0 +1,4 @@
+export * from "./useForm";
+export * from "./FormProvider";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/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,cAAc,YAAY;AAC1B,cAAc,iBAAiB"}

package/dist/esm/form/useForm.js

@@ -0,0 +1,33 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { useForm as useMantineForm } from "@mantine/form";
+export var useForm = function(options) {
+    var form = useMantineForm(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 _object_spread_props(_object_spread({}, 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 _object_spread_props(_object_spread({}, form), {
+        getInputProps: getInputProps
+    });
+};
+
+//# sourceMappingURL=useForm.js.map

package/dist/esm/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","useMantineForm","options","form","getInputProps","path","type","withError","withFocus","originalPayload","Array","isArray","value","onReorderItem","payload","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":"AAAA;;AAAA,SAAQA,WAAWC,cAAc,QAAO,gBAAgB;AAGxD,OAAO,IAAMD,UAAiC,SAACE,SAAY;IACvD,IAAMC,OAAOF,eAAeC;IAE5B,IAAME,gBAAwD,SAC1DC,MAEC;oFADkE,CAAC,oBAAnEC,MAAAA,8BAAO,2CAASC,WAAAA,wCAAYD,SAAS,gDAASE,WAAAA,wCAAY,IAAI;QAE/D,IAAMC,kBAAkBN,KAAKC,aAAa,CAACC,MAAM;YAACC,MAAAA;YAAMC,WAAAA;YAAWC,WAAAA;QAAS;QAC5E,IAAIE,MAAMC,OAAO,CAACF,gBAAgBG,KAAK,GAAG;YACtC,OAAO,wCACAH;gBACHI,eAAe,SAACC;2BAA2CX,KAAKY,eAAe,CAACV,MAAMS;;gBACtFE,cAAc,SAACC;2BAAkBd,KAAKe,cAAc,CAACb,MAAMY;;gBAC3DE,cAAc,SAACC,eAAwBH;2BACnCd,KAAKkB,cAAc,CAAChB,MAAMe,eAAeH;;;QAErD,CAAC;QAED,OAAOR;IACX;IAEA,OAAO,wCAAIN;QAAMC,eAAAA;;AACrB,EAAE"}

package/dist/esm/index.js

@@ -1,11 +1,12 @@
 export * from "@mantine/carousel";
 export * from "@mantine/core";
-export * from "@mantine/form";
 export * from "@mantine/hooks";
 export { createColumnHelper } from "@tanstack/table-core";
 export * from "./components";
+export * from "@mantine/form";
 // explicitly overriding mantine components
 export { Header, Table, Modal } from "./components";
+export { useForm, createFormContext } from "./form";
 export * from "./theme";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/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":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,SAAQA,kBAAkB,QAAuB,uBAAuB;AACxE,cAAc,eAAe;AAC7B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,EAAoBC,KAAK,QAAO,eAAe;AACpE,cAAc,UAAU"}
+{"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":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,SAAQA,kBAAkB,QAAuB,uBAAuB;AACxE,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,EAAoBC,KAAK,QAAO,eAAe;AACpE,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.28.3",
+  "version": "49.0.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -77,6 +77,7 @@
     "clean": "rimraf dist",
     "start": "node ../../scripts/start",
     "test": "jest --maxWorkers=65%",
-    "test:watch": "jest --watchAll"
+    "test:watch": "jest --watchAll",
+    "test:debug": "node --inspect-brk node_modules/jest/bin/jest --runInBand --watchAll --detectOpenHandles --forceExit"
   }
 }

package/src/components/collection/Collection.tsx

@@ -12,12 +12,13 @@ import {
     Tooltip,
     useComponentDefaultProps,
 } from '@mantine/core';
-import {useId} from '@mantine/hooks';
+import {ReorderPayload} from '@mantine/form/lib/types';
+import {useDidUpdate, useId} from '@mantine/hooks';
 import {ReactNode} from 'react';
 import {DragDropContext, Droppable} from 'react-beautiful-dnd';
-import {useControlledList} from '../../hooks';
-import {CollectionItem} from './CollectionItem';
+
 import useStyles from './Collection.styles';
+import {CollectionItem} from './CollectionItem';
 
 interface CollectionProps<T>
     extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,
@@ -39,10 +40,6 @@ interface CollectionProps<T>
      * @default []
      */
     value?: T[];
-    /**
-     * The initial items of the collection (for uncontrolled usage only)
-     */
-    defaultValue?: T[];
     /**
      * Unused, has no effect
      */
@@ -59,6 +56,19 @@ interface CollectionProps<T>
      * @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
      *
@@ -116,9 +126,10 @@ const defaultProps: Partial<CollectionProps<unknown>> = {
 export const Collection = <T,>(props: CollectionProps<T>) => {
     const {
         value,
-        defaultValue,
         onChange,
         onRemoveItem,
+        onReorderItem,
+        onInsertItem,
         disabled,
         draggable,
         children,
@@ -146,12 +157,14 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
     const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});
     const collectionID = useId('dnd-droppable');
 
-    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});
-    const hasOnlyOneItem = values.length === 1;
-    const removeItem = (index: number) => () => {
-        remove(index);
-        onRemoveItem?.(index);
-    };
+    const hasOnlyOneItem = value.length === 1;
+
+    /**
+     * Enforcing onChange when the value is modified will make sure the errors are carried through.
+     */
+    useDidUpdate(() => {
+        onChange?.(value);
+    }, [JSON.stringify(value)]);
 
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
@@ -171,13 +184,13 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
             </Box>
         ) : null;
 
-    const items = values.map((item, index) => (
+    const items = value.map((item, index) => (
         <CollectionItem
             key={index}
             disabled={disabled}
             draggable={draggable}
             index={index}
-            onRemove={removeItem(index)}
+            onRemove={() => onRemoveItem?.(index)}
             styles={styles}
             removable={!(required && hasOnlyOneItem)}
         >
@@ -185,7 +198,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         </CollectionItem>
     ));
 
-    const addAllowed = allowAdd?.(values) ?? true;
+    const addAllowed = allowAdd?.(value) ?? true;
 
     const _addButton = disabled ? null : (
         <Group>
@@ -194,7 +207,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
                     <Button
                         variant="subtle"
                         leftIcon={<AddSize16Px height={16} />}
-                        onClick={() => append(newItem)}
+                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}
                         disabled={!addAllowed}
                     >
                         {addLabel}
@@ -206,7 +219,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
 
     return (
         <DragDropContext
-            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}
+            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}
         >
             <Droppable direction="vertical" droppableId={collectionID}>
                 {(provided) => (

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -1,7 +1,7 @@
-import {useForm} from '@mantine/form';
 import {render, screen, userEvent, within} from '@test-utils';
 import {useState} from 'react';
 
+import {useForm} from '../../../form';
 import {Collection} from '../Collection';
 
 describe('Collection', () => {

package/src/form/FormProvider.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+import {_TransformValues, UseForm, UseFormReturnType} from '@mantine/form/lib/types';
+import React, {createContext, useContext} from 'react';
+
+import {useForm} from './useForm';
+
+export interface FormProviderProps<Form> {
+    form: Form;
+    children: React.ReactNode;
+}
+
+export function createFormContext<
+    Values,
+    TransformValues extends _TransformValues<Values> = (values: Values) => Values
+>() {
+    type Form = UseFormReturnType<Values, TransformValues>;
+
+    const FormContext = createContext<Form>(null);
+
+    function FormProvider({form, children}: FormProviderProps<Form>) {
+        return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
+    }
+
+    function useFormContext() {
+        const ctx = useContext(FormContext);
+        if (!ctx) {
+            throw new Error('useFormContext was called outside of FormProvider context');
+        }
+
+        return ctx;
+    }
+
+    return [FormProvider, useFormContext, useForm] as [
+        React.FC<FormProviderProps<Form>>,
+        () => Form,
+        UseForm<Values, TransformValues>
+    ];
+}

package/src/form/index.ts

@@ -0,0 +1,2 @@
+export * from './useForm';
+export * from './FormProvider';

package/src/form/useForm.ts

@@ -0,0 +1,26 @@
+import {useForm as useMantineForm} from '@mantine/form';
+import {GetInputProps} from '@mantine/form/lib/types';
+
+export const useForm: typeof useMantineForm = (options) => {
+    const form = useMantineForm(options);
+
+    const getInputProps: GetInputProps<Record<string, unknown>> = (
+        path,
+        {type = 'input', withError = type === 'input', withFocus = true} = {}
+    ) => {
+        const originalPayload = form.getInputProps(path, {type, withError, withFocus});
+        if (Array.isArray(originalPayload.value)) {
+            return {
+                ...originalPayload,
+                onReorderItem: (payload: Record<'from' | 'to', number>) => form.reorderListItem(path, payload),
+                onRemoveItem: (index: number) => form.removeListItem(path, index),
+                onInsertItem: (valueToInsert: unknown, index: number) =>
+                    form.insertListItem(path, valueToInsert, index),
+            };
+        }
+
+        return originalPayload;
+    };
+
+    return {...form, getInputProps};
+};

package/src/index.ts

@@ -4,13 +4,15 @@ 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';
 // explicitly overriding mantine components
 export {Header, Table, type HeaderProps, Modal} from './components';
+export {useForm, createFormContext} from './form';
+
 export * from './theme';
 
 declare module '@mantine/core' {