@saas-ui/forms 2.1.3 → 2.2.1

package/src/default-fields.tsx

@@ -29,6 +29,8 @@ import {
   SelectProps,
   NativeSelect,
   NativeSelectProps,
+  SelectButtonProps,
+  SelectListProps,
 } from './select'
 
 import { createField } from './create-field'
@@ -83,12 +85,18 @@ export const SwitchField = createField<SwitchProps>(
   }
 )
 
-export const SelectField = createField<SelectProps>(
+export interface SelectFieldProps extends SelectProps {
+  buttonProps?: SelectButtonProps
+  listProps?: SelectListProps
+}
+
+export const SelectField = createField<SelectFieldProps>(
   forwardRef((props, ref) => {
+    const { buttonProps, listProps, ...rest } = props
     return (
-      <Select ref={ref} {...props}>
-        <SelectButton />
-        <SelectList />
+      <Select ref={ref} {...rest}>
+        <SelectButton {...buttonProps} />
+        <SelectList {...listProps} />
       </Select>
     )
   }),

package/src/display-field.tsx

@@ -10,10 +10,11 @@ import {
 import { FieldProps } from './types'
 
 export interface DisplayFieldProps
-  extends FormControlProps,
-    Omit<FieldProps, 'type' | 'label'> {}
+  extends Omit<FormControlProps, 'onChange'>,
+    Omit<FieldProps, 'type' | 'label' | 'onChange'> {}
+
 /**
- *
+ * Display a field value.
  *
  * @see Docs https://saas-ui.dev/
  */

package/src/fields.tsx

@@ -82,7 +82,13 @@ export const AutoFields: React.FC<FieldsProps> = ({
           }
 
           return (
-            <Field key={name} name={name} type={type as any} {...fieldProps} />
+            <Field
+              key={name}
+              name={name}
+              type={type as any}
+              defaultValue={defaultValue}
+              {...fieldProps}
+            />
           )
         }
       )}

package/src/index.ts

@@ -112,6 +112,7 @@ export {
   type InputFieldProps,
   type NumberInputFieldProps,
   type PinFieldProps,
+  type SelectFieldProps,
 } from './default-fields'
 
 export type {

package/src/layout.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react'
 
-import {
-  chakra,
-  ResponsiveValue,
-  SimpleGrid,
-  SimpleGridProps,
-  useTheme,
-} from '@chakra-ui/react'
+import { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'
 import { cx } from '@chakra-ui/utils'
 
 export interface FormLayoutProps extends SimpleGridProps {}
@@ -47,12 +41,7 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
       {...gridProps}
       className={cx('sui-form__layout', props.className)}
     >
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return <FormLayoutItem>{child}</FormLayoutItem>
-        }
-        return child
-      })}
+      {children}
     </SimpleGrid>
   )
 }

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

@@ -8,6 +8,7 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
   NumberInputProps as ChakraNumberInputProps,
+  NumberInputFieldProps,
 } from '@chakra-ui/react'
 
 import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
@@ -25,6 +26,14 @@ interface NumberInputOptions {
    * Render a custom decrement icon.
    */
   decrementIcon?: React.ReactNode
+  /**
+   * The placeholder text when no value is selected.
+   */
+  placeholder?: string
+  /**
+   * Props to pass to the NumberInputField component.
+   */
+  fieldProps?: NumberInputFieldProps
 }
 
 export interface NumberInputProps
@@ -36,12 +45,16 @@ export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
     hideStepper,
     incrementIcon = <ChevronUpIcon />,
     decrementIcon = <ChevronDownIcon />,
+    placeholder,
+    fieldProps: _fieldProps,
     ...rest
   } = props
 
+  const fieldProps = { placeholder, ..._fieldProps }
+
   return (
     <ChakraNumberInput {...rest} ref={ref}>
-      <NumberInputField />
+      <NumberInputField {...fieldProps} />
 
       {!hideStepper && (
         <NumberInputStepper>

package/src/types.ts

@@ -42,7 +42,7 @@ export type ArrayFieldPath<Name extends string> = Name extends string
 export interface BaseFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<FormControlProps, 'label' | 'type'> {
+> extends Omit<FormControlProps, 'label' | 'type' | 'onChange'> {
   /**
    * The field name
    */

package/src/use-step-form.tsx

@@ -89,7 +89,13 @@ export function useStepForm<
 >(
   props: UseStepFormProps<TSteps, TFieldValues, TContext>
 ): UseStepFormReturn<TFieldValues> {
-  const { onChange, steps: stepsOptions, resolver, ...rest } = props
+  const {
+    onChange,
+    steps: stepsOptions,
+    resolver,
+    fieldResolver,
+    ...rest
+  } = props
   const stepper = useStepper(rest)
 
   const [options, setOptions] = React.useState<TSteps | undefined>(stepsOptions)
@@ -98,13 +104,20 @@ export function useStepForm<
 
   const [steps, updateSteps] = React.useState<Record<string, StepState>>({})
 
+  const mergedData = React.useRef<TFieldValues>({} as any)
+
   const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
     async (data) => {
       try {
         const step = steps[activeStep]
 
+        mergedData.current = {
+          ...mergedData.current,
+          ...data,
+        }
+
         if (isLastStep) {
-          await props.onSubmit?.(data)
+          await props.onSubmit?.(mergedData.current)
 
           updateStep({
             ...step,
@@ -122,7 +135,7 @@ export function useStepForm<
         // Step submission failed.
       }
     },
-    [steps, activeStep, isLastStep]
+    [steps, activeStep, isLastStep, mergedData]
   )
 
   const getFormProps = React.useCallback(() => {
@@ -134,8 +147,11 @@ export function useStepForm<
       resolver: step?.schema
         ? /* @todo fix resolver type */ (resolver as any)?.(step.schema)
         : undefined,
+      fieldResolver: step?.schema
+        ? (fieldResolver as any)?.(step.schema)
+        : undefined,
     }
-  }, [steps, onSubmitStep, activeStep])
+  }, [steps, onSubmitStep, activeStep, resolver, fieldResolver])
 
   const updateStep = React.useCallback(
     (step: StepState) => {