From 8d9d71a5125d3f85f140812d4b907ebbf8f8a3f5 Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Tue, 3 Oct 2023 19:39:31 +0300
Subject: [PATCH] fix(clerk-js): Add clearFeedback to types

---
 .../clerk-js/src/ui/elements/FormControl.tsx  |  3 +++
 .../src/ui/primitives/FormControl.tsx         | 26 ++++++++++++++++---
 .../ui/primitives/hooks/useFormControl.tsx    |  4 +++
 .../clerk-js/src/ui/utils/useFormControl.ts   |  1 +
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
index d05c3a97bb..46b47435ee 100644
--- a/packages/clerk-js/src/ui/elements/FormControl.tsx
+++ b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -52,6 +52,7 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
   feedback: string;
   feedbackType: FeedbackType;
   setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
   hasPassedComplexity: boolean;
   infoText?: string | LocalizationKey;
   radioOptions?: {
@@ -284,6 +285,7 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
     setWarning,
     setInfo,
     setHasPassedComplexity,
+    clearFeedback,
     radioOptions,
     groupPreffix,
     groupSuffix,
@@ -427,6 +429,7 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
       setWarning={setWarning}
       setInfo={setInfo}
       setHasPassedComplexity={setHasPassedComplexity}
+      clearFeedback={clearFeedback}
       sx={sx}
     >
       {isCheckbox ? (
diff --git a/packages/clerk-js/src/ui/primitives/FormControl.tsx b/packages/clerk-js/src/ui/primitives/FormControl.tsx
index 44b15ac646..c62d70a56f 100644
--- a/packages/clerk-js/src/ui/primitives/FormControl.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormControl.tsx
@@ -5,8 +5,18 @@ import type { FormControlProps } from './hooks';
 import { FormControlContextProvider } from './hooks';
 
 export const FormControl = (props: React.PropsWithChildren<FormControlProps>) => {
-  const { hasError, id, isRequired, setError, setInfo, setSuccess, setWarning, setHasPassedComplexity, ...rest } =
-    props;
+  const {
+    hasError,
+    id,
+    isRequired,
+    setError,
+    setInfo,
+    clearFeedback,
+    setSuccess,
+    setWarning,
+    setHasPassedComplexity,
+    ...rest
+  } = props;
   return (
     <Flex
       direction='col'
@@ -14,7 +24,17 @@ export const FormControl = (props: React.PropsWithChildren<FormControlProps>) =>
       css={{ position: 'relative', flex: '1 1 auto' }}
     >
       <FormControlContextProvider
-        {...{ hasError, id, isRequired, setError, setInfo, setSuccess, setWarning, setHasPassedComplexity }}
+        {...{
+          hasError,
+          id,
+          isRequired,
+          setError,
+          setInfo,
+          clearFeedback,
+          setSuccess,
+          setWarning,
+          setHasPassedComplexity,
+        }}
       >
         {props.children}
       </FormControlContextProvider>
diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
index 76b3e2a4de..4ff528b937 100644
--- a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
+++ b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
@@ -16,6 +16,7 @@ export type FormControlProps = {
   setWarning: (warning: string) => void;
   setInfo: (info: string) => void;
   setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
 };
 
 type FormControlContextValue = Required<FormControlProps> & { errorMessageId: string };
@@ -34,6 +35,7 @@ export const FormControlContextProvider = (props: React.PropsWithChildren<FormCo
     setWarning,
     setInfo,
     setHasPassedComplexity,
+    clearFeedback,
   } = props;
   // TODO: This shouldnt be targettable
   const id = `${propsId}-field`;
@@ -55,6 +57,7 @@ export const FormControlContextProvider = (props: React.PropsWithChildren<FormCo
         setWarning,
         setInfo,
         setHasPassedComplexity,
+        clearFeedback,
       },
     }),
     [
@@ -68,6 +71,7 @@ export const FormControlContextProvider = (props: React.PropsWithChildren<FormCo
       setInfo,
       setWarning,
       setHasPassedComplexity,
+      clearFeedback,
     ],
   );
   return <FormControlContext.Provider value={value}>{props.children}</FormControlContext.Provider>;
diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts
index b79de45d5e..46d7e578b5 100644
--- a/packages/clerk-js/src/ui/utils/useFormControl.ts
+++ b/packages/clerk-js/src/ui/utils/useFormControl.ts
@@ -55,6 +55,7 @@ type FieldStateProps<Id> = {
   setSuccess: (message: string) => void;
   setInfo: (info: string) => void;
   setHasPassedComplexity: (b: boolean) => void;
+  clearFeedback: () => void;
   hasPassedComplexity: boolean;
 } & Omit<Options, 'defaultChecked'>;