@saas-ui/forms 0.7.4 → 0.7.7

package/src/object-field.tsx

@@ -6,6 +6,7 @@ import {
   ResponsiveValue,
   useStyles,
 } from '@chakra-ui/react'
+import { __DEV__ } from '@chakra-ui/utils'
 
 import { FormLayout } from './layout'
 import { FieldProps } from './field'
@@ -37,3 +38,7 @@ export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
     </FormControl>
   )
 }
+
+if (__DEV__) {
+  ObjectField.displayName = 'ObjectField'
+}

package/src/step-form.tsx

@@ -28,11 +28,16 @@ import {
   useFormStep,
   StepFormProvider,
   UseStepFormProps,
+  UseStepFormReturn,
 } from './use-step-form'
 
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
   extends UseStepFormProps<TFieldValues>,
-    FormProps<TFieldValues> {}
+    FormProps<TFieldValues> {
+  children:
+    | React.ReactNode
+    | ((stepper: UseStepFormReturn<TFieldValues>) => React.ReactElement)
+}
 
 export const StepForm = React.forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
@@ -50,7 +55,7 @@ export const StepForm = React.forwardRef(
     return (
       <StepperProvider value={context}>
         <StepFormProvider value={context}>
-          <Form ref={ref} {...rest} {...getFormProps(props)}>
+          <Form ref={ref} {...rest} {...getFormProps()}>
             {runIfFn(children, stepper)}
           </Form>
         </StepFormProvider>

package/src/submit-button.tsx

@@ -5,6 +5,7 @@ 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 {
   /**
@@ -52,3 +53,7 @@ SubmitButton.defaultProps = {
   disableIfUntouched: false,
   disableIfInvalid: false,
 }
+
+if (__DEV__) {
+  SubmitButton.displayName = 'SubmitButton'
+}

package/src/use-step-form.tsx

@@ -35,9 +35,21 @@ export interface UseStepFormProps<
 > extends UseStepperProps,
     FormProps<TFieldValues> {}
 
+export interface UseStepFormReturn<
+  TFieldValues extends FieldValues = FieldValues
+> extends UseStepperReturn {
+  getFormProps(): {
+    onSubmit: SubmitHandler<TFieldValues>
+    schema?: any
+    resolver?: any
+  }
+  updateStep(step: any): void
+  steps: Record<string, any>
+}
+
 export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
   props: UseStepFormProps<TFieldValues>
-) {
+): UseStepFormReturn<TFieldValues> {
   const stepper = useStepper(props)
 
   const { activeStep, isLastStep, nextStep } = stepper
@@ -64,17 +76,14 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
     [activeStep, isLastStep]
   )
 
-  const getFormProps = React.useCallback(
-    (props) => {
-      const step = steps[activeStep]
-      return {
-        onSubmit: onSubmitStep,
-        schema: step?.schema,
-        resolver: step?.resolver,
-      }
-    },
-    [steps, onSubmitStep, activeStep]
-  )
+  const getFormProps = React.useCallback(() => {
+    const step = steps[activeStep]
+    return {
+      onSubmit: onSubmitStep,
+      schema: step?.schema,
+      resolver: step?.resolver,
+    }
+  }, [steps, onSubmitStep, activeStep])
 
   const updateStep = React.useCallback(
     (step) => {
@@ -96,8 +105,6 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
   }
 }
 
-export type UseStepFormReturn = ReturnType<typeof useStepForm>
-
 export interface UseFormStepProps {
   name: string
   schema?: any

package/zod/package.json

@@ -21,6 +21,7 @@
   "author": "Eelco Wiersma <eelco@appulse.nl>",
   "license": "MIT",
   "peerDependencies": {
+    "@chakra-ui/utils": "^1.10.4",
     "@hookform/resolvers": "^2.8.3",
     "react-hook-form": "^7.22.0",
     "zod": "^3.14.4"