@saas-ui/forms 1.0.0-rc.2 → 1.0.0-rc.5

package/src/field.tsx

@@ -227,7 +227,7 @@ const createField = (
           ref={ref}
           id={id}
           name={name}
-          label={label}
+          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
           rules={inputRules}
           {...inputProps}
         />
@@ -292,7 +292,7 @@ export interface RegisterFieldTypeOptions {
  * @param component The React component
  * @param options
  * @param options.isControlled Set this to true if this is a controlled field.
- * @param options.hideLabel Hide the field label, for example for checkbox or switch field.
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
  */
 export const registerFieldType = (
   type: string,
@@ -320,9 +320,12 @@ export const registerFieldType = (
   return Field
 }
 
-// @todo Consider not registering all fields by default to lower the package size and computations.
-// Not all types may be required in a project.
-export const InputField = registerFieldType('text', Input)
+export const InputField = registerFieldType(
+  'text',
+  forwardRef(({ type = 'text', ...rest }, ref) => {
+    return <Input type={type} {...rest} ref={ref} />
+  })
+)
 export const NumberInputField = registerFieldType('number', NumberInput, {
   isControlled: true,
 })
@@ -330,16 +333,11 @@ export const PasswordInputFIeld = registerFieldType('password', PasswordInput)
 export const TextareaField = registerFieldType('textarea', Textarea)
 export const SwitchField = registerFieldType(
   'switch',
-  forwardRef(({ label, ...props }: { label?: string }, ref) => {
-    return (
-      <Switch ref={ref} {...props}>
-        {label}
-      </Switch>
-    )
+  forwardRef(({ type, ...rest }, ref) => {
+    return <Switch {...rest} ref={ref} />
   }),
   {
     isControlled: true,
-    hideLabel: true,
   }
 )
 export const SelectField = registerFieldType('select', Select, {
@@ -347,13 +345,15 @@ export const SelectField = registerFieldType('select', Select, {
 })
 export const CheckboxField = registerFieldType(
   'checkbox',
-  forwardRef(({ label, ...props }: { label?: string }, ref) => {
-    return (
-      <Checkbox ref={ref} {...props}>
-        {label}
-      </Checkbox>
-    )
-  }),
+  forwardRef(
+    ({ label, type, ...props }: { label?: string; type: string }, ref) => {
+      return (
+        <Checkbox ref={ref} {...props}>
+          {label}
+        </Checkbox>
+      )
+    }
+  ),
   {
     hideLabel: true,
   }

package/src/object-field.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
   FormLabelProps,
   ResponsiveValue,
-  useStyles,
+  useStyleConfig,
 } from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 
@@ -21,8 +21,8 @@ export interface ObjectFieldProps extends FieldProps {
 }
 
 export const FormLegend = (props: FormLabelProps) => {
-  const styles = useStyles()
-  return <FormLabel as="legend" sx={styles.legend} {...props} />
+  const styles = useStyleConfig('FormLegend')
+  return <FormLabel as="legend" sx={styles} {...props} />
 }
 
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {

package/src/step-form.tsx

@@ -2,13 +2,7 @@ import * as React from 'react'
 
 import { FieldValues, UseFormReturn } from 'react-hook-form'
 
-import {
-  chakra,
-  HTMLChakraProps,
-  useMultiStyleConfig,
-  StylesProvider,
-  SystemStyleObject,
-} from '@chakra-ui/system'
+import { chakra, HTMLChakraProps } from '@chakra-ui/system'
 
 import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
 
@@ -18,6 +12,7 @@ import {
   StepperStepsProps,
   StepperStep,
   useStepperContext,
+  StepperContainer,
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
@@ -29,7 +24,6 @@ import {
   useFormStep,
   StepFormProvider,
   UseStepFormProps,
-  UseStepFormReturn,
 } from './use-step-form'
 
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
@@ -80,7 +74,7 @@ export interface FormStepOptions {
 }
 
 export const FormStepper: React.FC<StepperStepsProps> = (props) => {
-  const styles = useMultiStyleConfig('Stepper', props)
+  const { activeIndex, setIndex } = useStepperContext()
 
   const { children } = props
 
@@ -100,12 +94,16 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
     return child
   })
 
+  const onChange = React.useCallback((i: number) => {
+    setIndex(i)
+  }, [])
+
   return (
-    <StylesProvider value={styles}>
+    <StepperContainer step={activeIndex} onChange={onChange}>
       <StepperSteps mb="4" {...props}>
         {elements}
       </StepperSteps>
-    </StylesProvider>
+    </StepperContainer>
   )
 }
 

package/src/use-step-form.tsx

@@ -32,7 +32,7 @@ import { FormProps } from './form'
 
 export interface UseStepFormProps<
   TFieldValues extends FieldValues = FieldValues
-> extends UseStepperProps,
+> extends Omit<UseStepperProps, 'onChange'>,
     Omit<FormProps<TFieldValues>, 'children'> {
   children:
     | React.ReactNode
@@ -54,7 +54,8 @@ export interface UseStepFormReturn<
 export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
   props: UseStepFormProps<TFieldValues>
 ): UseStepFormReturn<TFieldValues> {
-  const stepper = useStepper(props)
+  const { onChange, ...rest } = props
+  const stepper = useStepper(rest)
 
   const { activeStep, isLastStep, nextStep } = stepper
 

package/yup/package.json

@@ -10,8 +10,8 @@
   "author": "Eelco Wiersma <eelco@appulse.nl>",
   "license": "MIT",
   "peerDependencies": {
-    "@hookform/resolvers": "^2.8.3",
-    "react-hook-form": "^7.22.0",
+    "@hookform/resolvers": "^2.9.0",
+    "react-hook-form": "^7.31.3",
     "yup": "^0.32.11"
   }
 }

package/zod/package.json

@@ -10,9 +10,9 @@
   "author": "Eelco Wiersma <eelco@appulse.nl>",
   "license": "MIT",
   "peerDependencies": {
-    "@chakra-ui/utils": "^2.0.0",
-    "@hookform/resolvers": "^2.8.3",
-    "react-hook-form": "^7.22.0",
-    "zod": "^3.14.4"
+    "@chakra-ui/utils": "^2.0.2",
+    "@hookform/resolvers": "^2.9.0",
+    "react-hook-form": "^7.31.3",
+    "zod": "^3.17.3"
   }
 }