From d1f880ec62b01f11ac6a21c68bcac0bff6804f59 Mon Sep 17 00:00:00 2001
From: Nerissa Aguirre <nerissa.aguirre@geolabor.com.br>
Date: Wed, 27 Aug 2025 09:26:44 -0300
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20exporta=20fun=C3=A7=C3=A3o=20de=20r?=
 =?UTF-8?q?eset=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/FormExamples.jsx               | 39 +++++++++++++++++++++++++++++
 src/forms/Form.jsx                  |  2 +-
 src/forms/FormActions.jsx           |  5 ++--
 src/forms/helpers/useFormControl.js |  1 +
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 951bea8..2c70c1e 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -20,6 +20,7 @@ import {
 export function FormExamples() {
   const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false);
   const [changeCustomValidation, setChangeCustomValidation] = useState(false);
+  const [useCustomActions, setUseCustomActions] = useState(false);
 
   const validations = useMemo(
     () => ({
@@ -138,6 +139,20 @@ export function FormExamples() {
       }}
       customValidation={bootstrapFormValidation}
       validations={validations}
+      customActions={
+        useCustomActions
+          ? (isSubmiting, { onCancel, resetForm }) => (
+              <div>
+                <button type="submit" className="btn btn-success">
+                  Custom save
+                </button>
+                <button type="button" className="btn btn-secondary" onClick={() => resetForm()}>
+                  Custom reset
+                </button>
+              </div>
+            )
+          : undefined
+      }
     >
       <h5>Form configuration:</h5>
       <FormGroupSwitch
@@ -152,6 +167,12 @@ export function FormExamples() {
         label="Change validation for variable custom validation?"
         afterChange={(value) => setChangeCustomValidation(value)}
       />
+      <FormGroupSwitch
+        id="useCustomActions"
+        name="useCustomActions"
+        label="Use form custom actions?"
+        afterChange={(value) => setUseCustomActions(value)}
+      />
       <hr />
       <div className="row">
         <div className="col">
@@ -734,10 +755,28 @@ export function FormExamples() {
         includeEmptyItem={false}
         menuClassName="p-4 w-100"
       />
+
+      <ResetForm />
     </Form>
   );
 }
 
+const ResetForm = () => {
+  const formControl = useFormControl();
+
+  const reset = () => {
+    console.log('reset form');
+
+    formControl.resetFormData();
+  };
+
+  return (
+    <button type="button" className="btn btn-outline-secondary mb-3" onClick={reset}>
+      Reset form
+    </button>
+  );
+};
+
 const FormSwitchExample = () => {
   const autocompleteField1FormControl = useFormControl('autocompleteField1');
 
diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
index 8c61184..ea8ab05 100644
--- a/src/forms/Form.jsx
+++ b/src/forms/Form.jsx
@@ -76,7 +76,7 @@ export function Form({
     <form {...formProps}>
       <FormContext.Provider value={formState}>{children}</FormContext.Provider>
 
-      <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel, isSubmiting, customActions }} />
+      <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel, isSubmiting, customActions, resetForm }} />
     </form>
   );
 }
diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx
index fde1c87..658caa3 100644
--- a/src/forms/FormActions.jsx
+++ b/src/forms/FormActions.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isFunction } from 'js-var-type';
 
-export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions }) {
+export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) {
   if (customActions) {
-    return isFunction(customActions) ? customActions(isSubmiting) : customActions;
+    return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions;
   }
 
   return (
@@ -25,4 +25,5 @@ FormActions.propTypes = {
   onCancel: PropTypes.func.isRequired,
   isSubmiting: PropTypes.bool,
   customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  resetForm: PropTypes.func,
 };
diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js
index 2121ed8..bff92e9 100644
--- a/src/forms/helpers/useFormControl.js
+++ b/src/forms/helpers/useFormControl.js
@@ -48,6 +48,7 @@ export function useFormControl(name, type) {
     handleOnChange,
     register,
     getFormData: () => formState.getFormData(),
+    resetFormData: () => formState.reset(),
     isValid: () => formState.getValidationMessage(name) === '',
     getFormSubmitedAttempted: () => formState.getSubmitedAttempted(),
   };

From e7e5dd90581b6f59bfa67767569ae99e0e6964bc Mon Sep 17 00:00:00 2001
From: Nerissa Aguirre <nerissa.aguirre@geolabor.com.br>
Date: Wed, 27 Aug 2025 09:51:45 -0300
Subject: [PATCH 2/5] fix PropTypes

---
 demo/FormExamples.jsx     | 1 +
 src/forms/Form.jsx        | 2 +-
 src/forms/FormActions.jsx | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 2c70c1e..6d78495 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -21,6 +21,7 @@ export function FormExamples() {
   const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false);
   const [changeCustomValidation, setChangeCustomValidation] = useState(false);
   const [useCustomActions, setUseCustomActions] = useState(false);
+  console.log('🚀 ~ FormExamples ~ useCustomActions:', useCustomActions);
 
   const validations = useMemo(
     () => ({
diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
index ea8ab05..23ded04 100644
--- a/src/forms/Form.jsx
+++ b/src/forms/Form.jsx
@@ -92,7 +92,7 @@ Form.defaultProps = {
 Form.propTypes = {
   cancelLabel: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  customActions: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   customValidation: PropTypes.bool,
   initialValues: PropTypes.object,
   onCancel: PropTypes.func,
diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx
index 658caa3..9bb07c1 100644
--- a/src/forms/FormActions.jsx
+++ b/src/forms/FormActions.jsx
@@ -24,6 +24,6 @@ FormActions.propTypes = {
   cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   onCancel: PropTypes.func.isRequired,
   isSubmiting: PropTypes.bool,
-  customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   resetForm: PropTypes.func,
 };

From 13101ce099f34df6344c3656acd87455ee63c4ac Mon Sep 17 00:00:00 2001
From: Nerissa Aguirre <nerissa.aguirre@geolabor.com.br>
Date: Thu, 28 Aug 2025 15:40:38 -0300
Subject: [PATCH 3/5] =?UTF-8?q?coment=C3=A1rio=20da=20revis=C3=A3o.=20Obri?=
 =?UTF-8?q?gada=20Caio!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/FormExamples.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 6d78495..2c70c1e 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -21,7 +21,6 @@ export function FormExamples() {
   const [bootstrapFormValidation, setBootstrapFormValidation] = useState(false);
   const [changeCustomValidation, setChangeCustomValidation] = useState(false);
   const [useCustomActions, setUseCustomActions] = useState(false);
-  console.log('🚀 ~ FormExamples ~ useCustomActions:', useCustomActions);
 
   const validations = useMemo(
     () => ({

From aec585c550974d0fd4f77918001423d0440128ed Mon Sep 17 00:00:00 2001
From: Nerissa Aguirre <nerissa.aguirre@geolabor.com.br>
Date: Mon, 1 Sep 2025 14:07:21 -0300
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20exporta=20fun=C3=A7=C3=A3o=20de=20c?=
 =?UTF-8?q?lear=20Form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/FormExamples.jsx               | 30 +++++++++++++++++++++++++----
 src/forms/Form.jsx                  | 21 +++++++++++++++++++-
 src/forms/FormActions.jsx           |  5 +++--
 src/forms/helpers/useForm.js        | 20 ++++++++++++++++++-
 src/forms/helpers/useFormControl.js |  3 ++-
 5 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 2c70c1e..b815a31 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -129,6 +129,8 @@ export function FormExamples() {
         });
       }}
       transform={(formData, _, update) => {
+        console.log('transform >> formData:', formData);
+
         formData.__v = formData.__v ? formData.__v + 1 : 1;
 
         update(formData);
@@ -141,14 +143,17 @@ export function FormExamples() {
       validations={validations}
       customActions={
         useCustomActions
-          ? (isSubmiting, { onCancel, resetForm }) => (
+          ? (isSubmiting, { onCancel, resetForm, clearForm }) => (
               <div>
-                <button type="submit" className="btn btn-success">
+                <button type="submit" className="btn btn-success me-2">
                   Custom save
                 </button>
-                <button type="button" className="btn btn-secondary" onClick={() => resetForm()}>
+                <button type="button" className="btn btn-secondary me-2" onClick={() => resetForm()}>
                   Custom reset
                 </button>
+                <button type="button" className="btn btn-info" onClick={() => clearForm()}>
+                  Custom clear
+                </button>
               </div>
             )
           : undefined
@@ -757,6 +762,7 @@ export function FormExamples() {
       />
 
       <ResetForm />
+      <ClearForm />
     </Form>
   );
 }
@@ -765,7 +771,7 @@ const ResetForm = () => {
   const formControl = useFormControl();
 
   const reset = () => {
-    console.log('reset form');
+    console.log('reset form - resets to initial state');
 
     formControl.resetFormData();
   };
@@ -777,6 +783,22 @@ const ResetForm = () => {
   );
 };
 
+const ClearForm = () => {
+  const formControl = useFormControl();
+
+  const clear = () => {
+    console.log('clear form - sets empty state');
+
+    formControl.clearFormData();
+  };
+
+  return (
+    <button type="button" className="btn btn-outline-info ms-2 mb-3" onClick={clear}>
+      Clear form
+    </button>
+  );
+};
+
 const FormSwitchExample = () => {
   const autocompleteField1FormControl = useFormControl('autocompleteField1');
 
diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
index 23ded04..c0b0c7d 100644
--- a/src/forms/Form.jsx
+++ b/src/forms/Form.jsx
@@ -22,6 +22,7 @@ export function Form({
   const formRef = useRef(null);
   const [isSubmiting, setIsSubmiting] = useState(false);
 
+  /* Resets to initial values/state */
   function resetForm() {
     if (formRef.current && formRef.current.classList) {
       formRef.current.classList.remove('was-validated');
@@ -30,6 +31,14 @@ export function Form({
     formState.reset();
   }
 
+  function clearForm() {
+    if (formRef.current && formRef.current.classList) {
+      formRef.current.classList.remove('was-validated');
+    }
+
+    formState.clear();
+  }
+
   function handleSubmit(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -76,7 +85,17 @@ export function Form({
     <form {...formProps}>
       <FormContext.Provider value={formState}>{children}</FormContext.Provider>
 
-      <FormActions {...{ submitLabel, cancelLabel, onCancel: handleCancel, isSubmiting, customActions, resetForm }} />
+      <FormActions
+        {...{
+          submitLabel,
+          cancelLabel,
+          onCancel: handleCancel,
+          isSubmiting,
+          customActions,
+          resetForm,
+          clearForm,
+        }}
+      />
     </form>
   );
 }
diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx
index 9bb07c1..4a41bf8 100644
--- a/src/forms/FormActions.jsx
+++ b/src/forms/FormActions.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isFunction } from 'js-var-type';
 
-export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) {
+export function FormActions({ submitLabel, cancelLabel, clearForm, onCancel, isSubmiting, customActions, resetForm }) {
   if (customActions) {
-    return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions;
+    return isFunction(customActions) ? customActions(isSubmiting, { clearForm, onCancel, resetForm }) : customActions;
   }
 
   return (
@@ -22,6 +22,7 @@ export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, c
 FormActions.propTypes = {
   submitLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  clearForm: PropTypes.func,
   onCancel: PropTypes.func.isRequired,
   isSubmiting: PropTypes.bool,
   customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
diff --git a/src/forms/helpers/useForm.js b/src/forms/helpers/useForm.js
index 00e73ac..35f594f 100644
--- a/src/forms/helpers/useForm.js
+++ b/src/forms/helpers/useForm.js
@@ -44,15 +44,30 @@ function useFormState(initialState, { onChange, transform }) {
         return nextFormState;
       });
     },
+    /* Resets to initial values/state */
     resetState() {
       setIsDirty(false);
       setFormState(initialState);
     },
+    /* Sets empty state */
+    clearState() {
+      setIsDirty(true);
+
+      setFormState(() => {
+        const nextFormState = {};
+
+        setTimeout(() => {
+          transformRef.current(nextFormState);
+        });
+
+        return nextFormState;
+      });
+    },
   };
 }
 
 export function useForm(initialState, { validations, onChange, transform }) {
-  const { getState, updateState, resetState } = useFormState(initialState, { onChange, transform });
+  const { getState, updateState, resetState, clearState } = useFormState(initialState, { onChange, transform });
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const [, setRefreshForm] = useState(false);
   const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap();
@@ -125,6 +140,9 @@ export function useForm(initialState, { validations, onChange, transform }) {
     getValue(name) {
       return getValueByPath(formState, name);
     },
+    clear() {
+      clearState();
+    },
     reset() {
       resetState();
       setSubmitAttempted(false);
diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js
index bff92e9..5969a46 100644
--- a/src/forms/helpers/useFormControl.js
+++ b/src/forms/helpers/useFormControl.js
@@ -48,7 +48,8 @@ export function useFormControl(name, type) {
     handleOnChange,
     register,
     getFormData: () => formState.getFormData(),
-    resetFormData: () => formState.reset(),
+    resetFormData: () => formState.reset(), /* Resets to initial values/state */
+    clearFormData: () => formState.clear(), /* Sets empty state */
     isValid: () => formState.getValidationMessage(name) === '',
     getFormSubmitedAttempted: () => formState.getSubmitedAttempted(),
   };

From c03262ed91bbb30fa999909cec184694be6feed9 Mon Sep 17 00:00:00 2001
From: Nerissa Aguirre <nerissa.aguirre@geolabor.com.br>
Date: Mon, 1 Sep 2025 17:06:30 -0300
Subject: [PATCH 5/5] lint fix

---
 src/forms/helpers/useFormControl.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js
index 5969a46..228d5ae 100644
--- a/src/forms/helpers/useFormControl.js
+++ b/src/forms/helpers/useFormControl.js
@@ -48,8 +48,8 @@ export function useFormControl(name, type) {
     handleOnChange,
     register,
     getFormData: () => formState.getFormData(),
-    resetFormData: () => formState.reset(), /* Resets to initial values/state */
-    clearFormData: () => formState.clear(), /* Sets empty state */
+    resetFormData: () => formState.reset() /* Resets to initial values/state */,
+    clearFormData: () => formState.clear() /* Sets empty state */,
     isValid: () => formState.getValidationMessage(name) === '',
     getFormSubmitedAttempted: () => formState.getSubmitedAttempted(),
   };