@saas-ui/forms 1.0.0-rc.0 → 1.0.0-rc.3

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) => {