@mantine/form 7.7.2 → 7.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/cjs/hooks/use-form-errors/filter-errors/filter-errors.cjs.map +1 -0
  2. package/cjs/hooks/use-form-errors/use-form-errors.cjs +48 -0
  3. package/cjs/hooks/use-form-errors/use-form-errors.cjs.map +1 -0
  4. package/cjs/hooks/use-form-list/use-form-list.cjs +45 -0
  5. package/cjs/hooks/use-form-list/use-form-list.cjs.map +1 -0
  6. package/cjs/hooks/use-form-status/use-form-status.cjs +119 -0
  7. package/cjs/hooks/use-form-status/use-form-status.cjs.map +1 -0
  8. package/cjs/hooks/use-form-values/use-form-values.cjs +80 -0
  9. package/cjs/hooks/use-form-values/use-form-values.cjs.map +1 -0
  10. package/cjs/hooks/use-form-watch/use-form-watch.cjs +44 -0
  11. package/cjs/hooks/use-form-watch/use-form-watch.cjs.map +1 -0
  12. package/cjs/use-form.cjs +104 -182
  13. package/cjs/use-form.cjs.map +1 -1
  14. package/cjs/validate/validate-values.cjs +1 -1
  15. package/cjs/validate/validate-values.cjs.map +1 -1
  16. package/esm/hooks/use-form-errors/filter-errors/filter-errors.mjs.map +1 -0
  17. package/esm/hooks/use-form-errors/use-form-errors.mjs +46 -0
  18. package/esm/hooks/use-form-errors/use-form-errors.mjs.map +1 -0
  19. package/esm/hooks/use-form-list/use-form-list.mjs +43 -0
  20. package/esm/hooks/use-form-list/use-form-list.mjs.map +1 -0
  21. package/esm/hooks/use-form-status/use-form-status.mjs +113 -0
  22. package/esm/hooks/use-form-status/use-form-status.mjs.map +1 -0
  23. package/esm/hooks/use-form-values/use-form-values.mjs +78 -0
  24. package/esm/hooks/use-form-values/use-form-values.mjs.map +1 -0
  25. package/esm/hooks/use-form-watch/use-form-watch.mjs +42 -0
  26. package/esm/hooks/use-form-watch/use-form-watch.mjs.map +1 -0
  27. package/esm/use-form.mjs +105 -179
  28. package/esm/use-form.mjs.map +1 -1
  29. package/esm/validate/validate-values.mjs +1 -1
  30. package/esm/validate/validate-values.mjs.map +1 -1
  31. package/lib/{filter-errors → hooks/use-form-errors/filter-errors}/filter-errors.d.ts +1 -1
  32. package/lib/hooks/use-form-errors/use-form-errors.d.ts +9 -0
  33. package/lib/hooks/use-form-list/use-form-list.d.ts +15 -0
  34. package/lib/hooks/use-form-status/use-form-status.d.ts +29 -0
  35. package/lib/hooks/use-form-values/use-form-values.d.ts +38 -0
  36. package/lib/hooks/use-form-watch/use-form-watch.d.ts +12 -0
  37. package/lib/types.d.ts +19 -1
  38. package/lib/use-form.d.ts +1 -1
  39. package/package.json +1 -1
  40. package/cjs/filter-errors/filter-errors.cjs.map +0 -1
  41. package/esm/filter-errors/filter-errors.mjs.map +0 -1
  42. package/lib/filter-errors/index.d.ts +0 -1
  43. /package/cjs/{filter-errors → hooks/use-form-errors/filter-errors}/filter-errors.cjs +0 -0
  44. /package/esm/{filter-errors → hooks/use-form-errors/filter-errors}/filter-errors.mjs +0 -0
@@ -0,0 +1,29 @@
1
+ import { ClearFieldDirty, FormMode, FormStatus, GetFieldStatus, ResetStatus, SetFieldDirty, SetFieldTouched } from '../../types';
2
+ import type { $FormValues } from '../use-form-values/use-form-values';
3
+ export interface $FormStatus<Values extends Record<string, any>> {
4
+ touchedState: FormStatus;
5
+ dirtyState: FormStatus;
6
+ touchedRef: React.MutableRefObject<FormStatus>;
7
+ dirtyRef: React.MutableRefObject<FormStatus>;
8
+ setTouched: React.Dispatch<React.SetStateAction<FormStatus>>;
9
+ setDirty: React.Dispatch<React.SetStateAction<FormStatus>>;
10
+ resetDirty: ResetStatus;
11
+ resetTouched: ResetStatus;
12
+ isTouched: GetFieldStatus<Values>;
13
+ setFieldTouched: SetFieldTouched<Values>;
14
+ setFieldDirty: SetFieldDirty<Values>;
15
+ setTouchedState: React.Dispatch<React.SetStateAction<FormStatus>>;
16
+ setDirtyState: React.Dispatch<React.SetStateAction<FormStatus>>;
17
+ clearFieldDirty: ClearFieldDirty;
18
+ isDirty: GetFieldStatus<Values>;
19
+ getDirty: () => FormStatus;
20
+ getTouched: () => FormStatus;
21
+ }
22
+ interface UseFormStatusInput<Values extends Record<string, any>> {
23
+ initialDirty: FormStatus;
24
+ initialTouched: FormStatus;
25
+ mode: FormMode;
26
+ $values: $FormValues<Values>;
27
+ }
28
+ export declare function useFormStatus<Values extends Record<string, any>>({ initialDirty, initialTouched, mode, $values, }: UseFormStatusInput<Values>): $FormStatus<Values>;
29
+ export {};
@@ -0,0 +1,38 @@
1
+ import { FormMode } from '../../types';
2
+ export interface $FormValues<Values extends Record<PropertyKey, any>> {
3
+ initialized: React.MutableRefObject<boolean>;
4
+ stateValues: Values;
5
+ refValues: React.MutableRefObject<Values>;
6
+ valuesSnapshot: React.MutableRefObject<Values>;
7
+ setValues: (payload: SetValuesInput<Values>) => void;
8
+ setFieldValue: (payload: SetFieldValueInput<Values>) => void;
9
+ resetValues: () => void;
10
+ setValuesSnapshot: (payload: Values) => void;
11
+ initialize: (values: Values, onInitialize: () => void) => void;
12
+ getValues: () => Values;
13
+ }
14
+ export interface SetValuesSubscriberPayload<Values> {
15
+ path?: PropertyKey;
16
+ updatedValues: Values;
17
+ previousValues: Values;
18
+ }
19
+ export interface SetValuesInput<Values> {
20
+ values: Partial<Values> | ((values: Values) => Partial<Values>);
21
+ mergeWithPreviousValues?: boolean;
22
+ updateState?: boolean;
23
+ subscribers?: (SetFieldValueSubscriber<Values> | null | undefined)[];
24
+ }
25
+ export type SetFieldValueSubscriber<Values> = (payload: SetValuesSubscriberPayload<Values>) => void;
26
+ export interface SetFieldValueInput<Values> {
27
+ path: PropertyKey;
28
+ value: any;
29
+ updateState?: boolean;
30
+ subscribers?: (SetFieldValueSubscriber<Values> | null | undefined)[];
31
+ }
32
+ interface UseFormValuesInput<Values extends Record<PropertyKey, any>> {
33
+ initialValues: Values | undefined;
34
+ mode: FormMode;
35
+ onValuesChange?: ((values: Values, previousValues: Values) => void) | undefined;
36
+ }
37
+ export declare function useFormValues<Values extends Record<PropertyKey, any>>({ initialValues, onValuesChange, mode, }: UseFormValuesInput<Values>): $FormValues<Values>;
38
+ export {};
@@ -0,0 +1,12 @@
1
+ import { FormFieldSubscriber, LooseKeys, Watch } from '../../types';
2
+ import { $FormStatus } from '../use-form-status/use-form-status';
3
+ import { SetValuesSubscriberPayload } from '../use-form-values/use-form-values';
4
+ interface UseFormWatchInput<Values extends Record<string, any>> {
5
+ $status: $FormStatus<Values>;
6
+ }
7
+ export declare function useFormWatch<Values extends Record<string, any>>({ $status, }: UseFormWatchInput<Values>): {
8
+ subscribers: import("react").MutableRefObject<Record<LooseKeys<Values>, FormFieldSubscriber<Values, any>[]>>;
9
+ watch: Watch<Values>;
10
+ getFieldSubscribers: (path: LooseKeys<Values>) => ((input: SetValuesSubscriberPayload<Values>) => void)[];
11
+ };
12
+ export {};
package/lib/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export type GetInputPropsType = 'input' | 'checkbox';
2
+ export type FormMode = 'controlled' | 'uncontrolled';
2
3
  export type FormStatus = Record<string, boolean>;
3
4
  export interface FormFieldValidationResult {
4
5
  hasError: boolean;
@@ -45,7 +46,9 @@ export interface GetInputPropsReturnType {
45
46
  }
46
47
  export type GetInputProps<Values> = <Field extends LooseKeys<Values>>(path: Field, options?: GetInputPropsOptions) => GetInputPropsReturnType;
47
48
  export type PathValue<T, P extends LooseKeys<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? PathValue<T[K], Rest> : unknown : P extends keyof T ? T[P] : unknown;
48
- export type SetFieldValue<Values> = <Field extends LooseKeys<Values>>(path: Field, value: PathValue<Values, Field> | ((prevValue: PathValue<Values, Field>) => PathValue<Values, Field>)) => void;
49
+ export type SetFieldValue<Values> = <Field extends LooseKeys<Values>>(path: Field, value: PathValue<Values, Field> | ((prevValue: PathValue<Values, Field>) => PathValue<Values, Field>), options?: {
50
+ forceUpdate: boolean;
51
+ }) => void;
49
52
  export type ClearFieldError = (path: unknown) => void;
50
53
  export type ClearFieldDirty = (path: unknown) => void;
51
54
  export type ClearErrors = () => void;
@@ -53,17 +56,28 @@ export type Reset = () => void;
53
56
  export type Validate = () => FormValidationResult;
54
57
  export type ValidateField<Values> = <Field extends LooseKeys<Values>>(path: Field) => FormFieldValidationResult;
55
58
  export type SetFieldError<Values> = <Field extends LooseKeys<Values>>(path: Field, error: React.ReactNode) => void;
59
+ export type SetFieldTouched<Values> = <Field extends LooseKeys<Values>>(path: Field, touched: boolean) => void;
60
+ export type SetFieldDirty<Values> = <Field extends LooseKeys<Values>>(path: Field, dirty: boolean) => void;
56
61
  export type ReorderListItem<Values> = <Field extends LooseKeys<Values>>(path: Field, payload: ReorderPayload) => void;
57
62
  export type InsertListItem<Values> = <Field extends LooseKeys<Values>>(path: Field, item: unknown, index?: number) => void;
58
63
  export type RemoveListItem<Values> = <Field extends LooseKeys<Values>>(path: Field, index: number) => void;
59
64
  export type GetFieldStatus<Values> = <Field extends LooseKeys<Values>>(path?: Field) => boolean;
60
65
  export type ResetStatus = () => void;
66
+ export type GetStatus = () => FormStatus;
61
67
  export type ResetDirty<Values> = (values?: Values) => void;
62
68
  export type IsValid<Values> = <Field extends LooseKeys<Values>>(path?: Field) => boolean;
63
69
  export type Initialize<Values> = (values: Values) => void;
64
70
  export type _TransformValues<Values> = (values: Values) => unknown;
71
+ export type FormFieldSubscriber<Values, Field extends LooseKeys<Values>> = (input: {
72
+ previousValue: PathValue<Values, Field>;
73
+ value: PathValue<Values, Field>;
74
+ touched: boolean;
75
+ dirty: boolean;
76
+ }) => void;
77
+ export type Watch<Values> = <Field extends LooseKeys<Values>>(path: Field, subscriber: FormFieldSubscriber<Values, Field>) => void;
65
78
  export interface UseFormInput<Values, TransformValues extends _TransformValues<Values> = (values: Values) => Values> {
66
79
  name?: string;
80
+ mode?: FormMode;
67
81
  initialValues?: Values;
68
82
  initialErrors?: FormErrors;
69
83
  initialTouched?: FormStatus;
@@ -110,6 +124,10 @@ export interface UseFormReturnType<Values, TransformValues extends _TransformVal
110
124
  resetDirty: ResetDirty<Values>;
111
125
  isValid: IsValid<Values>;
112
126
  getTransformedValues: GetTransformedValues<Values, TransformValues>;
127
+ getValues: () => Values;
128
+ getTouched: GetStatus;
129
+ getDirty: GetStatus;
130
+ watch: Watch<Values>;
113
131
  }
114
132
  export type UseForm<Values = Record<string, unknown>, TransformValues extends _TransformValues<Values> = (values: Values) => Values> = (input?: UseFormInput<Values, TransformValues>) => UseFormReturnType<Values, TransformValues>;
115
133
  export type TransformedValues<Form extends UseFormReturnType<any>> = Parameters<Parameters<Form['onSubmit']>[0]>[0];
package/lib/use-form.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { _TransformValues, UseFormInput, UseFormReturnType } from './types';
2
- export declare function useForm<Values = Record<string, unknown>, TransformValues extends _TransformValues<Values> = (values: Values) => Values>({ name, initialValues, initialErrors, initialDirty, initialTouched, clearInputErrorOnChange, validateInputOnChange, validateInputOnBlur, onValuesChange, transformValues, enhanceGetInputProps, validate: rules, }?: UseFormInput<Values, TransformValues>): UseFormReturnType<Values, TransformValues>;
2
+ export declare function useForm<Values extends Record<string, any> = Record<string, any>, TransformValues extends _TransformValues<Values> = (values: Values) => Values>({ name, mode, initialValues, initialErrors, initialDirty, initialTouched, clearInputErrorOnChange, validateInputOnChange, validateInputOnBlur, onValuesChange, transformValues, enhanceGetInputProps, validate: rules, }?: UseFormInput<Values, TransformValues>): UseFormReturnType<Values, TransformValues>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/form",
3
- "version": "7.7.2",
3
+ "version": "7.8.0",
4
4
  "description": "Mantine form management library",
5
5
  "homepage": "https://mantine.dev",
6
6
  "license": "MIT",
@@ -1 +0,0 @@
1
- {"version":3,"file":"filter-errors.cjs","sources":["../../src/filter-errors/filter-errors.ts"],"sourcesContent":["import type { FormErrors } from '../types';\n\nexport function filterErrors(errors: FormErrors): FormErrors {\n if (errors === null || typeof errors !== 'object') {\n return {};\n }\n\n return Object.keys(errors).reduce<FormErrors>((acc, key) => {\n const errorValue = errors[key];\n\n if (errorValue !== undefined && errorValue !== null && errorValue !== false) {\n acc[key] = errorValue;\n }\n\n return acc;\n }, {});\n}\n"],"names":[],"mappings":";;;AACO,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAE,CAAA,CAAA;AACrC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAI,MAAM,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,IAAI,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAE,CAAA,CAAA;AACrD,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAAC;AACd,CAAG,CAAA,CAAA;AACH,CAAA,CAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAC,CAAG,CAAA,CAAA,CAAA,CAAE,GAAG,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAClD,CAAA,CAAA,CAAA,CAAI,MAAM,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAG,MAAM,CAAC,CAAA,CAAA,CAAG,CAAC,CAAC;AACnC,CAAA,CAAA,CAAA,CAAI,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAI,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,KAAK,CAAE,CAAA,CAAA;AAC9E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,GAAG,CAAC,CAAA,CAAA,CAAG,CAAC,CAAA,CAAA,CAAG,UAAU,CAAC;AAC5B,CAAK,CAAA,CAAA,CAAA,CAAA;AACL,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,GAAG,CAAC;AACf,CAAG,CAAA,CAAA,CAAA,CAAE,CAAE,CAAA,CAAC,CAAC;AACT,CAAA;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"filter-errors.mjs","sources":["../../src/filter-errors/filter-errors.ts"],"sourcesContent":["import type { FormErrors } from '../types';\n\nexport function filterErrors(errors: FormErrors): FormErrors {\n if (errors === null || typeof errors !== 'object') {\n return {};\n }\n\n return Object.keys(errors).reduce<FormErrors>((acc, key) => {\n const errorValue = errors[key];\n\n if (errorValue !== undefined && errorValue !== null && errorValue !== false) {\n acc[key] = errorValue;\n }\n\n return acc;\n }, {});\n}\n"],"names":[],"mappings":";AACO,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAE,CAAA,CAAA;AACrC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAI,MAAM,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,IAAI,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAE,CAAA,CAAA;AACrD,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAAE,CAAC;AACd,CAAG,CAAA,CAAA;AACH,CAAA,CAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAA,CAAA,CAAA,CAAI,CAAC,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAC,CAAG,CAAA,CAAA,CAAA,CAAE,GAAG,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAClD,CAAA,CAAA,CAAA,CAAI,MAAM,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAG,MAAM,CAAC,CAAA,CAAA,CAAG,CAAC,CAAC;AACnC,CAAA,CAAA,CAAA,CAAI,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAI,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,KAAK,CAAE,CAAA,CAAA;AAC9E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,GAAG,CAAC,CAAA,CAAA,CAAG,CAAC,CAAA,CAAA,CAAG,UAAU,CAAC;AAC5B,CAAK,CAAA,CAAA,CAAA,CAAA;AACL,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,GAAG,CAAC;AACf,CAAG,CAAA,CAAA,CAAA,CAAE,CAAE,CAAA,CAAC,CAAC;AACT,CAAA;;"}
@@ -1 +0,0 @@
1
- export { filterErrors } from './filter-errors';