feat: add onToggle prop to DisplayIf

.changeset/odd-buttons-stare.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/forms': minor
+---
+
+Added new onToggle prop to DisplayIf

apps/website/src/pages/docs/components/forms/form/usage.mdx

@@ -464,7 +464,11 @@ export default function ConditionalFields() {
             label="Ship to my home address"
           />
 
-          <DisplayIf name="ship" condition={(ship) => !!ship}>
+          <DisplayIf
+            name="ship"
+            condition={(ship) => !!ship}
+            onToggle={(matches) => console.log(matches)}
+          >
             <FormLayout>
               <Heading size="md" mt="4">
                 Address

packages/saas-ui-forms/src/display-if.tsx

@@ -18,6 +18,10 @@ export interface DisplayIfProps<
   isDisabled?: boolean
   isExact?: boolean
   condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
+  onToggle?: (
+    conditionMatched: boolean,
+    context: UseFormReturn<TFieldValues>
+  ) => void
 }
 /**
  * Conditionally render parts of a form.
@@ -34,15 +38,32 @@ export const DisplayIf = <
   isDisabled,
   isExact,
   condition = (value) => !!value,
+  onToggle,
 }: DisplayIfProps<TFieldValues, TName>) => {
+  const initializedRef = React.useRef(false)
+  const matchesRef = React.useRef(false)
+
   const value = useWatch<TFieldValues>({
     name,
     defaultValue: defaultValue as any,
     disabled: isDisabled,
     exact: isExact,
   })
   const context = useFormContext() as any
-  return condition(value, context) ? children : null
+
+  const matches = condition(value, context)
+
+  React.useEffect(() => {
+    if (!initializedRef.current) {
+      initializedRef.current = true
+      return
+    }
+    if (matchesRef.current === matches) return
+    matchesRef.current = matches
+    onToggle?.(matches, context)
+  }, [value])
+
+  return matches ? children : null
 }
 
 DisplayIf.displayName = 'DisplayIf'