@saas-ui/forms 0.5.0 → 0.5.2

package/dist/step-form.d.ts

@@ -3,7 +3,7 @@ import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { HTMLChakraProps } from '@chakra-ui/system';
 import { StepperStepsProps } from '@saas-ui/stepper';
 import { ButtonProps } from '@saas-ui/button';
-import { FormProps } from '.';
+import { FormProps } from './form';
 import { UseStepFormProps } from './use-step-form';
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepFormProps<TFieldValues>, FormProps<TFieldValues> {
 }

package/dist/step-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAgB,MAAM,GAAG,CAAA;AAEjD,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}
+{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGxC,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}

package/dist/use-array-field.d.ts

@@ -52,7 +52,7 @@ export interface ArrayFieldOptions {
      */
     defaultValue?: Record<string, any>;
     /**
-     * Default key name for rows, change this if your data uses 'id'
+     * Default key name for rows, change this if your data uses a different 'id' field
      * @default "id"
      */
     keyName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -64,6 +64,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react-utils": "^1.2.1",
+    "@chakra-ui/utils": "^1.10.4",
     "@hookform/resolvers": "^2.8.3",
     "@saas-ui/button": "0.3.0",
     "@saas-ui/input-right-button": "0.3.0",

package/src/array-field.tsx

@@ -20,6 +20,7 @@ import {
   useArrayFieldRowContext,
   useArrayFieldRemoveButton,
   useArrayFieldAddButton,
+  UseArrayFieldReturn,
 } from './use-array-field'
 
 interface ArrayField {
@@ -137,26 +138,28 @@ export interface ArrayFieldProps
   extends ArrayFieldOptions,
     Omit<FieldProps, 'defaultValue'> {}
 
-export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
-  const { children, ...containerProps } = props
-
-  return (
-    <ArrayFieldContainer {...containerProps}>
-      <ArrayFieldRows>
-        {(fields: ArrayField[]) => (
-          <>
-            {fields.map(({ id }, index: number) => (
-              <ArrayFieldRow key={id} index={index}>
-                {children}
-              </ArrayFieldRow>
-            ))}
-          </>
-        )}
-      </ArrayFieldRows>
-      <ArrayFieldAddButton />
-    </ArrayFieldContainer>
-  )
-}
+export const ArrayField = React.forwardRef(
+  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
+    const { children, ...containerProps } = props
+
+    return (
+      <ArrayFieldContainer ref={ref} {...containerProps}>
+        <ArrayFieldRows>
+          {(fields: ArrayField[]) => (
+            <>
+              {fields.map(({ id }, index: number) => (
+                <ArrayFieldRow key={id} index={index}>
+                  {children}
+                </ArrayFieldRow>
+              ))}
+            </>
+          )}
+        </ArrayFieldRows>
+        <ArrayFieldAddButton />
+      </ArrayFieldContainer>
+    )
+  }
+)
 
 export interface ArrayFieldRowsProps {
   children: (fields: ArrayField[]) => React.ReactElement | null
@@ -169,28 +172,36 @@ export const ArrayFieldRows = ({
   return children(fields)
 }
 
-export const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({
-  name,
-  defaultValue,
-  keyName,
-  min,
-  max,
-  children,
-  ...fieldProps
-}) => {
-  const context = useArrayField({
-    name,
-    defaultValue,
-    keyName,
-    min,
-    max,
-  })
-
-  return (
-    <ArrayFieldProvider value={context}>
-      <BaseField name={name} {...fieldProps}>
-        {children}
-      </BaseField>
-    </ArrayFieldProvider>
-  )
-}
+export const ArrayFieldContainer = React.forwardRef(
+  (
+    {
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+      children,
+      ...fieldProps
+    }: ArrayFieldProps,
+    ref: React.ForwardedRef<UseArrayFieldReturn>
+  ) => {
+    const context = useArrayField({
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+    })
+
+    // This exposes the useArrayField api through the forwarded ref
+    React.useImperativeHandle(ref, () => context, [ref, context])
+
+    return (
+      <ArrayFieldProvider value={context}>
+        <BaseField name={name} {...fieldProps}>
+          {children}
+        </BaseField>
+      </ArrayFieldProvider>
+    )
+  }
+)

package/src/form.tsx

@@ -87,7 +87,7 @@ export const Form = forwardRef(
     const methods = useForm<TFieldValues>(form)
     const { handleSubmit } = methods
 
-    // This exposes the useForm api through the forwareded ref
+    // This exposes the useForm api through the forwarded ref
     React.useImperativeHandle(ref, () => methods, [ref, methods])
 
     return (

package/src/step-form.tsx

@@ -20,7 +20,8 @@ import {
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { Form, FormProps, SubmitButton } from '.'
+import { Form, FormProps } from './form'
+import { SubmitButton } from './submit-button'
 
 import {
   useStepForm,

package/src/use-array-field.tsx

@@ -69,7 +69,7 @@ export interface ArrayFieldOptions {
    */
   defaultValue?: Record<string, any>
   /**
-   * Default key name for rows, change this if your data uses 'id'
+   * Default key name for rows, change this if your data uses a different 'id' field
    * @default "id"
    */
   keyName?: string

package/src/use-step-form.tsx

@@ -113,6 +113,6 @@ export function useFormStep(props: UseFormStepProps): StepState {
 
   return {
     ...step,
-    ...(steps[name] || {}),
+    ...(steps[name] || { name, schema }),
   }
 }