Ad UI 9399 fix get input props (#3602)

* chore(mantine): bump to mantine v7, first commit
rebasing

* chore(mantine): lots of css modules, preparing theme and components
rebasing

* chore(mantine)!: more breaking stuff

* chore(mantine)!: more module, less v6, build working

* chore(mantine)!: trying to style my branch so it looks 1:1 with master

* chore(mantine)!: apply some visual fixes to look like prod

* chore(mantine)!: fixed table style and rows

* chore(mantine)!: fixed all the rest style expect table gutter grid

* chore(mantine)!: fix interfaces and remove comments

* chore(useForm)!: change condition in useform hook

* chore(useForm)!: fixed collection demo

* chore(useForm): fixed ternary and faker-js

* chore(useForm): removed console.log

* chore(useForm)!: fix unit test

packages/mantine/src/components/collection/__tests__/Collection.spec.tsx

@@ -9,7 +9,7 @@ describe('Collection', () => {
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
-                <Collection<string> newItem="" {...form.getInputProps('fruits')}>
+                <Collection<string> newItem="" {...form.getInputProps('fruits', {type: 'collection'})}>
                     {(name) => <span data-testid="item">{name}</span>}
                 </Collection>
             );
@@ -29,7 +29,7 @@ describe('Collection', () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
                 <>
-                    <Collection newItem="" {...form.getInputProps('fruits')}>
+                    <Collection newItem="" {...form.getInputProps('fruits', {type: 'collection'})}>
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
@@ -58,7 +58,11 @@ describe('Collection', () => {
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
-                <Collection newItem="" {...form.getInputProps('fruits')} onRemoveItem={onRemoveItemSpy}>
+                <Collection
+                    newItem=""
+                    {...form.getInputProps('fruits', {type: 'collection'})}
+                    onRemoveItem={onRemoveItemSpy}
+                >
                     {(name) => <span data-testid="item">{name}</span>}
                 </Collection>
             );
@@ -88,7 +92,7 @@ describe('Collection', () => {
             return (
                 <>
                     <button onClick={() => setDisabled(true)}>disable</button>
-                    <Collection newItem="" {...form.getInputProps('fruits')} disabled={disabled}>
+                    <Collection newItem="" {...form.getInputProps('fruits', {type: 'collection'})} disabled={disabled}>
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                 </>
@@ -107,7 +111,7 @@ describe('Collection', () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
                 <>
-                    <Collection newItem="new" {...form.getInputProps('fruits')}>
+                    <Collection newItem="new" {...form.getInputProps('fruits', {type: 'collection'})}>
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
@@ -133,7 +137,11 @@ describe('Collection', () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
                 <>
-                    <Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
+                    <Collection
+                        newItem="new"
+                        {...form.getInputProps('fruits', {type: 'collection'})}
+                        allowAdd={allowAdd}
+                    >
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
@@ -155,7 +163,12 @@ describe('Collection', () => {
             const Fixture = () => {
                 const form = useForm({initialValues: {fruits: ['banana']}});
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                    <Collection
+                        data-testid="collection"
+                        {...form.getInputProps('fruits', {type: 'collection'})}
+                        newItem="new"
+                        required
+                    >
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                 );
@@ -175,7 +188,12 @@ describe('Collection', () => {
             const Fixture = () => {
                 const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                    <Collection
+                        data-testid="collection"
+                        {...form.getInputProps('fruits', {type: 'collection'})}
+                        newItem="new"
+                        required
+                    >
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                 );
@@ -198,7 +216,12 @@ describe('Collection', () => {
             const Fixture = () => {
                 const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                    <Collection
+                        data-testid="collection"
+                        {...form.getInputProps('fruits', {type: 'collection'})}
+                        newItem="new"
+                        required
+                    >
                         {(name) => <span data-testid="item">{name}</span>}
                     </Collection>
                 );
@@ -228,7 +251,7 @@ describe('Collection', () => {
                 const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
                 return (
                     <>
-                        <Collection newItem="new" {...form.getInputProps('fruits')} draggable>
+                        <Collection newItem="new" {...form.getInputProps('fruits', {type: 'collection'})} draggable>
                             {(name) => <span data-testid="item">{name}</span>}
                         </Collection>
                     </>
@@ -249,7 +272,7 @@ describe('Collection', () => {
                     return (
                         <Collection
                             data-testid="collection"
-                            {...form.getInputProps('fruits')}
+                            {...form.getInputProps('fruits', {type: 'collection'})}
                             newItem="new"
                             required
                             draggable

packages/mantine/src/form/__tests__/useForm.spec.tsx

@@ -0,0 +1,18 @@
+import {renderHook} from '../../__tests__/Utils';
+import {useForm} from '../useForm';
+
+describe('useForm', () => {
+    it("returns 'onReorderItem', 'onRemoveItem' & 'onInsertItem' if the form is 'collection' type", () => {
+        const view = renderHook(() => useForm({initialValues: {fruits: ['banana', 'orange']}}));
+
+        const propsTypeCollection = view.result.current.getInputProps('fruits', {type: 'collection'});
+        expect(typeof propsTypeCollection.onReorderItem).toBe('function');
+        expect(typeof propsTypeCollection.onRemoveItem).toBe('function');
+        expect(typeof propsTypeCollection.onInsertItem).toBe('function');
+
+        const propsNotCollection = view.result.current.getInputProps('fruits');
+        expect(typeof propsNotCollection.onReorderItem).toBe('undefined');
+        expect(typeof propsNotCollection.onRemoveItem).toBe('undefined');
+        expect(typeof propsNotCollection.onInsertItem).toBe('undefined');
+    });
+});

packages/mantine/src/form/useForm.ts

@@ -1,15 +1,41 @@
 import {useForm as useMantineForm} from '@mantine/form';
-import {GetInputProps} from '@mantine/form/lib/types';
+import {LooseKeys, UseFormInput, _TransformValues} from '@mantine/form/lib/types';
 
-export const useForm: typeof useMantineForm = (options) => {
+type InputTypes = 'input' | 'checkbox' | 'collection';
+
+type GetInputProps<Values> = <Field extends LooseKeys<Values>>(
+    path: Field,
+    options?: {type?: InputTypes; withError?: boolean; withFocus?: boolean},
+) => {
+    value: any;
+    onChange: any;
+    checked?: any;
+    error?: any;
+    onFocus?: any;
+    onBlur?: any;
+    onReorderItem?: any;
+    onRemoveItem?: any;
+    onInsertItem?: any;
+};
+
+export const useForm = <
+    Values = Record<string, unknown>,
+    TransformValues extends _TransformValues<Values> = (values: Values) => Values,
+>(
+    options: UseFormInput<Values, TransformValues> = {},
+) => {
     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)) {
+        const originalPayload = form.getInputProps(path, {
+            type: type === 'collection' ? 'input' : type,
+            withError,
+            withFocus,
+        });
+        if (type === 'collection') {
             return {
                 ...originalPayload,
                 onReorderItem: (payload: Record<'from' | 'to', number>) => form.reorderListItem(path, payload),

packages/website/src/examples/form/collection/Collection.demo.tsx

@@ -22,7 +22,7 @@ const Demo = () => {
             description="These will have to be done by next week"
             label="List of tasks"
             newItem={{name: '', done: false}}
-            {...form.getInputProps('todoList')}
+            {...form.getInputProps('todoList', {type: 'collection'})}
         >
             {(_task, index) => (
                 <>

packages/website/src/examples/layout/Table/TableClientSide.demo.tsx

@@ -23,10 +23,10 @@ const makeData = (len: number): Person[] =>
     Array(len)
         .fill(0)
         .map(() => ({
-            id: faker.datatype.uuid(),
-            firstName: faker.name.firstName(),
-            lastName: faker.name.lastName(),
-            age: faker.datatype.number(40),
+            id: faker.string.uuid(),
+            firstName: faker.person.firstName(),
+            lastName: faker.person.lastName(),
+            age: faker.number.int(40),
         }));
 
 const fuzzyFilter: FilterFn<Person> = (row, columnId, value) => rankItem(row.getValue(columnId), value).passed;