@saas-ui/forms 2.2.1 → 2.3.0

package/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,7 +38,11 @@ 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,
@@ -42,7 +50,20 @@ export const DisplayIf = <
     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'

package/src/number-input/number-input.tsx

@@ -42,7 +42,7 @@ export interface NumberInputProps
 
 export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
   const {
-    hideStepper,
+    hideStepper = false,
     incrementIcon = <ChevronUpIcon />,
     decrementIcon = <ChevronDownIcon />,
     placeholder,
@@ -66,8 +66,4 @@ export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
   )
 })
 
-NumberInput.defaultProps = {
-  hideStepper: false,
-}
-
 NumberInput.displayName = 'NumberInput'

package/src/pin-input/pin-input.tsx

@@ -39,8 +39,4 @@ export const PinInput = forwardRef<PinInputProps, 'div'>((props, ref) => {
   )
 })
 
-PinInput.defaultProps = {
-  pinLength: 4,
-}
-
 PinInput.displayName = 'PinInput'

package/src/submit-button.tsx

@@ -28,9 +28,10 @@ export interface SubmitButtonProps extends ButtonProps {
 export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
   (props, ref) => {
     const {
+      variant = 'primary',
       children = 'Submit',
-      disableIfUntouched,
-      disableIfInvalid,
+      disableIfUntouched = false,
+      disableIfInvalid = false,
       isDisabled: isDisabledProp,
       isLoading,
       ...rest
@@ -46,6 +47,7 @@ export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
       <Button
         {...rest}
         ref={ref}
+        variant={variant}
         type="submit"
         isLoading={formState.isSubmitting || isLoading}
         isDisabled={isDisabled}
@@ -56,10 +58,4 @@ export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
   }
 )
 
-SubmitButton.defaultProps = {
-  variant: 'primary',
-  disableIfUntouched: false,
-  disableIfInvalid: false,
-}
-
 SubmitButton.displayName = 'SubmitButton'