@saas-ui/forms 1.0.0-rc.8 → 1.0.1

package/src/submit-button.tsx

@@ -4,7 +4,6 @@ import { useFormContext } from 'react-hook-form'
 
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { forwardRef } from '@chakra-ui/system'
 import { __DEV__ } from '@chakra-ui/utils'
 
 export interface SubmitButtonProps extends ButtonProps {
@@ -24,29 +23,38 @@ export interface SubmitButtonProps extends ButtonProps {
   disableIfInvalid?: boolean
 }
 
-export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
-  (props, ref) => {
-    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props
-    const { formState } = useFormContext()
-
-    const isDisabled =
-      (disableIfUntouched && !formState.isDirty) ||
-      (disableIfInvalid && !formState.isValid)
-
-    return (
-      <Button
-        type="submit"
-        isLoading={formState.isSubmitting}
-        colorScheme="primary"
-        ref={ref}
-        isDisabled={isDisabled}
-        {...rest}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
+export const SubmitButton = React.forwardRef<
+  HTMLButtonElement,
+  SubmitButtonProps
+>((props, ref) => {
+  const {
+    children,
+    disableIfUntouched,
+    disableIfInvalid,
+    isDisabled: isDisabledProp,
+    isLoading,
+    ...rest
+  } = props
+  const { formState } = useFormContext()
+
+  const isDisabled =
+    (disableIfUntouched && !formState.isDirty) ||
+    (disableIfInvalid && !formState.isValid) ||
+    isDisabledProp
+
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      variant="primary"
+      type="submit"
+      isLoading={formState.isSubmitting || isLoading}
+      isDisabled={isDisabled}
+    >
+      {children}
+    </Button>
+  )
+})
 
 SubmitButton.defaultProps = {
   label: 'Submit',

package/src/use-step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FieldValues, SubmitHandler } from 'react-hook-form'
-import { createContext } from '@chakra-ui/react-utils'
+import { FieldValues, SubmitHandler, UnpackNestedValue } from 'react-hook-form'
+import { createContext, MaybeRenderProp } from '@chakra-ui/react-utils'
 import {
   useStepper,
   useStep,
@@ -14,8 +14,16 @@ export interface StepState {
   resolver?: any
   isActive?: boolean
   isCompleted?: boolean
+  onSubmit?: FormStepSubmitHandler
 }
 
+export type FormStepSubmitHandler<
+  TFieldValues extends FieldValues = FieldValues
+> = (
+  data: UnpackNestedValue<TFieldValues>,
+  stepper: UseStepperReturn
+) => Promise<void>
+
 export interface StepFormContext extends UseStepperReturn {
   updateStep(state: StepState): void
   steps: Record<string, StepState>
@@ -34,9 +42,7 @@ export interface UseStepFormProps<
   TFieldValues extends FieldValues = FieldValues
 > extends Omit<UseStepperProps, 'onChange'>,
     Omit<FormProps<TFieldValues>, 'children'> {
-  children:
-    | React.ReactNode
-    | ((stepper: UseStepFormReturn<TFieldValues>) => React.ReactElement)
+  children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
 }
 
 export interface UseStepFormReturn<
@@ -63,11 +69,12 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
 
   const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
     async (data) => {
+      const step = steps[activeStep]
+
       if (isLastStep) {
         return props
           .onSubmit?.(data)
           .then(() => {
-            const step = steps[activeStep]
             updateStep({
               ...step,
               isCompleted: true,
@@ -76,9 +83,15 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
           .then(nextStep) // Show completed step
       }
 
-      nextStep()
+      try {
+        await step.onSubmit?.(data, stepper)
+
+        nextStep()
+      } catch (e) {
+        // Step submission failed.
+      }
     },
-    [activeStep, isLastStep]
+    [steps, activeStep, isLastStep]
   )
 
   const getFormProps = React.useCallback(() => {
@@ -114,16 +127,17 @@ export interface UseFormStepProps {
   name: string
   schema?: any
   resolver?: any
+  onSubmit?: FormStepSubmitHandler
 }
 
 export function useFormStep(props: UseFormStepProps): StepState {
-  const { name, schema, resolver } = props
+  const { name, schema, resolver, onSubmit } = props
   const step = useStep({ name })
 
   const { steps, updateStep } = useStepFormContext()
 
   React.useEffect(() => {
-    updateStep({ name, schema, resolver })
+    updateStep({ name, schema, resolver, onSubmit })
   }, [name, schema])
 
   return {