fix(clerk-js): Add clearFeedback to types

clerk · Oct 3, 2023 · 8d9d71a · 8d9d71a
1 parent e904f11
commit 8d9d71a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -5,16 +5,36 @@ 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'
       {...rest}
       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
@@ -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
@@ -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'>;