@mantine/form - npm Package Compare versions

Comparing version 5.0.3 to 5.1.0

cjs/paths/get-path.js

@@ -9,3 +9,3 @@ 'use strict';
   const splittedPath = getSplittedPath.getSplittedPath(path);
-  if (splittedPath.length === 0) {
+  if (splittedPath.length === 0 || typeof values !== "object" || values === null) {
     return void 0;
@@ -12,0 +12,0 @@ }

cjs/use-form.js

@@ -6,4 +6,6 @@ 'use strict';
 var react = require('react');
+var isEqual = require('fast-deep-equal');
 var filterErrors = require('./filter-errors/filter-errors.js');
 var shouldValidateOnChange = require('./validate/should-validate-on-change.js');
+var getPath = require('./paths/get-path.js');
 var setPath = require('./paths/set-path.js');
@@ -16,5 +18,9 @@ var validateFieldValue = require('./validate/validate-field-value.js');
 var validateValues = require('./validate/validate-values.js');
-var getPath = require('./paths/get-path.js');
+var getStatus = require('./get-status/get-status.js');
 var getInputOnChange = require('./get-input-on-change/get-input-on-change.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
 var __defProp = Object.defineProperty;
@@ -42,2 +48,4 @@ var __defProps = Object.defineProperties;
   initialErrors = {},
+  initialDirty = {},
+  initialTouched = {},
   clearInputErrorOnChange = true,
@@ -47,4 +55,8 @@ validateInputOnChange = false,
 } = {}) {
+  const [touched, setTouched] = react.useState(initialTouched);
+  const [dirty, setDirty] = react.useState(initialDirty);
   const [values, _setValues] = react.useState(initialValues);
   const [errors, _setErrors] = react.useState(filterErrors.filterErrors(initialErrors));
+  const resetTouched = react.useCallback(() => setTouched({}), []);
+  const resetDirty = react.useCallback(() => setDirty({}), []);
   const setErrors = react.useCallback((errs) => _setErrors((current) => filterErrors.filterErrors(typeof errs === "function" ? errs(current) : errs)), []);
@@ -55,2 +67,4 @@ const clearErrors = react.useCallback(() => _setErrors({}), []);
     clearErrors();
+    resetDirty();
+    resetTouched();
   }, []);
@@ -69,2 +83,6 @@ const setFieldError = react.useCallback((path, error) => setErrors((current) => __spreadProps(__spreadValues({}, current), { [path]: error })), []);
     _setValues((current) => {
+      const initialValue = getPath.getPath(path, initialValues);
+      const isFieldDirty = !isEqual__default(initialValue, value);
+      setDirty((currentDirty) => __spreadProps(__spreadValues({}, currentDirty), { [path]: isFieldDirty }));
+      setTouched((currentTouched) => __spreadProps(__spreadValues({}, currentTouched), { [path]: true }));
       const result = setPath.setPath(path, value, current);
@@ -99,11 +117,17 @@ if (shouldValidate) {
   }, [values, rules]);
-  const getInputProps = (path, { type = "input", withError = type === "input" } = {}) => {
+  const getInputProps = (path, { type = "input", withError = type === "input", withFocus = true } = {}) => {
     const onChange = getInputOnChange.getInputOnChange((value) => setFieldValue(path, value));
-    const withOptionalError = (payload) => {
-      if (withError) {
-        payload.error = errors[path];
-      }
-      return payload;
-    };
-    return type === "checkbox" ? withOptionalError({ checked: getPath.getPath(path, values), onChange }) : withOptionalError({ value: getPath.getPath(path, values), onChange });
+    const payload = { onChange };
+    if (withError) {
+      payload.error = errors[path];
+    }
+    if (type === "checkbox") {
+      payload.checked = getPath.getPath(path, values);
+    } else {
+      payload.value = getPath.getPath(path, values);
+    }
+    if (withFocus) {
+      payload.onFocus = () => setTouched((current) => __spreadProps(__spreadValues({}, current), { [path]: true }));
+    }
+    return payload;
   };
@@ -123,2 +147,4 @@ const onSubmit = (handleSubmit, handleValidationFailure) => (event) => {
   }, []);
+  const isDirty = react.useCallback((path) => getStatus.getStatus(dirty, path), [dirty]);
+  const isTouched = react.useCallback((path) => getStatus.getStatus(touched, path), [touched]);
   return {
@@ -141,3 +167,9 @@ values,
     onSubmit,
-    onReset
+    onReset,
+    isDirty,
+    isTouched,
+    setTouched,
+    setDirty,
+    resetTouched,
+    resetDirty
   };
@@ -144,0 +176,0 @@ }

esm/paths/get-path.js

@@ -5,3 +5,3 @@ import { getSplittedPath } from './get-splitted-path.js';
   const splittedPath = getSplittedPath(path);
-  if (splittedPath.length === 0) {
+  if (splittedPath.length === 0 || typeof values !== "object" || values === null) {
     return void 0;
@@ -8,0 +8,0 @@ }

esm/use-form.js

 import { useState, useCallback } from 'react';
+import isEqual from 'fast-deep-equal';
 import { filterErrors } from './filter-errors/filter-errors.js';
 import { shouldValidateOnChange } from './validate/should-validate-on-change.js';
+import { getPath } from './paths/get-path.js';
 import { setPath } from './paths/set-path.js';
@@ -11,3 +13,3 @@ import { validateFieldValue } from './validate/validate-field-value.js';
 import { validateValues } from './validate/validate-values.js';
-import { getPath } from './paths/get-path.js';
+import { getStatus } from './get-status/get-status.js';
 import { getInputOnChange } from './get-input-on-change/get-input-on-change.js';
@@ -37,2 +39,4 @@
   initialErrors = {},
+  initialDirty = {},
+  initialTouched = {},
   clearInputErrorOnChange = true,
@@ -42,4 +46,8 @@ validateInputOnChange = false,
 } = {}) {
+  const [touched, setTouched] = useState(initialTouched);
+  const [dirty, setDirty] = useState(initialDirty);
   const [values, _setValues] = useState(initialValues);
   const [errors, _setErrors] = useState(filterErrors(initialErrors));
+  const resetTouched = useCallback(() => setTouched({}), []);
+  const resetDirty = useCallback(() => setDirty({}), []);
   const setErrors = useCallback((errs) => _setErrors((current) => filterErrors(typeof errs === "function" ? errs(current) : errs)), []);
@@ -50,2 +58,4 @@ const clearErrors = useCallback(() => _setErrors({}), []);
     clearErrors();
+    resetDirty();
+    resetTouched();
   }, []);
@@ -64,2 +74,6 @@ const setFieldError = useCallback((path, error) => setErrors((current) => __spreadProps(__spreadValues({}, current), { [path]: error })), []);
     _setValues((current) => {
+      const initialValue = getPath(path, initialValues);
+      const isFieldDirty = !isEqual(initialValue, value);
+      setDirty((currentDirty) => __spreadProps(__spreadValues({}, currentDirty), { [path]: isFieldDirty }));
+      setTouched((currentTouched) => __spreadProps(__spreadValues({}, currentTouched), { [path]: true }));
       const result = setPath(path, value, current);
@@ -94,11 +108,17 @@ if (shouldValidate) {
   }, [values, rules]);
-  const getInputProps = (path, { type = "input", withError = type === "input" } = {}) => {
+  const getInputProps = (path, { type = "input", withError = type === "input", withFocus = true } = {}) => {
     const onChange = getInputOnChange((value) => setFieldValue(path, value));
-    const withOptionalError = (payload) => {
-      if (withError) {
-        payload.error = errors[path];
-      }
-      return payload;
-    };
-    return type === "checkbox" ? withOptionalError({ checked: getPath(path, values), onChange }) : withOptionalError({ value: getPath(path, values), onChange });
+    const payload = { onChange };
+    if (withError) {
+      payload.error = errors[path];
+    }
+    if (type === "checkbox") {
+      payload.checked = getPath(path, values);
+    } else {
+      payload.value = getPath(path, values);
+    }
+    if (withFocus) {
+      payload.onFocus = () => setTouched((current) => __spreadProps(__spreadValues({}, current), { [path]: true }));
+    }
+    return payload;
   };
@@ -118,2 +138,4 @@ const onSubmit = (handleSubmit, handleValidationFailure) => (event) => {
   }, []);
+  const isDirty = useCallback((path) => getStatus(dirty, path), [dirty]);
+  const isTouched = useCallback((path) => getStatus(touched, path), [touched]);
   return {
@@ -136,3 +158,9 @@ values,
     onSubmit,
-    onReset
+    onReset,
+    isDirty,
+    isTouched,
+    setTouched,
+    setDirty,
+    resetTouched,
+    resetDirty
   };
@@ -139,0 +167,0 @@ }

lib/types.d.ts

 /// <reference types="react" />
 export declare type GetInputPropsType = 'input' | 'checkbox';
+export declare type FormStatus = Record<string, boolean>;
 export interface FormFieldValidationResult {
@@ -27,2 +28,3 @@ hasError: boolean;
 export declare type SetErrors = React.Dispatch<React.SetStateAction<FormErrors>>;
+export declare type SetFormStatus = React.Dispatch<React.SetStateAction<FormStatus>>;
 export declare type OnSubmit<Values> = (handleSubmit: (values: Values, event: React.FormEvent<HTMLFormElement>) => void, handleValidationFailure?: (errors: FormErrors, values: Values, event: React.FormEvent<HTMLFormElement>) => void) => (event: React.FormEvent<HTMLFormElement>) => void;
@@ -33,2 +35,3 @@ export declare type OnReset = (event: React.FormEvent<HTMLFormElement>) => void;
     withError?: boolean;
+    withFocus?: boolean;
 }) => any;
@@ -45,5 +48,9 @@ export declare type SetFieldValue<Values> = <Field extends LooseKeys<Values>>(path: Field, value: Field extends keyof Values ? Values[Field] : unknown) => void;
 export declare type RemoveListItem<Values> = <Field extends LooseKeys<Values>>(path: Field, index: number) => void;
+export declare type GetFieldStatus<Values> = <Field extends LooseKeys<Values>>(path?: Field) => boolean;
+export declare type ResetStatus = () => void;
 export interface UseFormInput<Values> {
     initialValues?: Values;
     initialErrors?: FormErrors;
+    initialTouched?: FormStatus;
+    initialDirty?: FormStatus;
     validate?: FormValidateInput<Values>;
@@ -71,4 +78,10 @@ clearInputErrorOnChange?: boolean;
     onReset: OnReset;
+    isDirty: GetFieldStatus<Values>;
+    isTouched: GetFieldStatus<Values>;
+    setTouched: SetFormStatus;
+    setDirty: SetFormStatus;
+    resetTouched: ResetStatus;
+    resetDirty: ResetStatus;
 }
 export {};
 //# sourceMappingURL=types.d.ts.map

lib/use-form.d.ts

 import { UseFormReturnType, UseFormInput } from './types';
-export declare function useForm<Values = Record<string, unknown>>({ initialValues, initialErrors, clearInputErrorOnChange, validateInputOnChange, validate: rules, }?: UseFormInput<Values>): UseFormReturnType<Values>;
+export declare function useForm<Values = Record<string, unknown>>({ initialValues, initialErrors, initialDirty, initialTouched, clearInputErrorOnChange, validateInputOnChange, validate: rules, }?: UseFormInput<Values>): UseFormReturnType<Values>;
 //# sourceMappingURL=use-form.d.ts.map

package.json

 {
   "name": "@mantine/form",
   "description": "Mantine form management library",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "main": "cjs/index.js",
@@ -21,5 +21,6 @@ "module": "esm/index.js",
   "dependencies": {
-    "klona": "^2.0.5"
+    "klona": "^2.0.5",
+    "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124519

increased by10.98%

Number of package files

124

increased by6.9%

Lines of code

1071

increased by9.85%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedfast-deep-equal@^3.1.3

• + Addedfast-deep-equal@3.1.3(transitive)