@rachelallyson/hero-hook-form 2.5.1 → 2.7.0

package/dist/react/index.js

@@ -76,7 +76,7 @@ function useFormHelper({
 
 // src/components/FormField.tsx
 import React17 from "react";
-import { useWatch as useWatch3 } from "react-hook-form";
+import { get, useWatch as useWatch3 } from "react-hook-form";
 
 // src/fields/AutocompleteField.tsx
 import React from "react";
@@ -438,18 +438,23 @@ function FieldArrayField({
 }) {
   const {
     addButtonText = "Add Item",
+    defaultItem,
+    enableReordering = false,
     fields: fieldConfigs,
     max = 10,
     min = 0,
     name,
-    removeButtonText = "Remove"
+    removeButtonText = "Remove",
+    renderAddButton,
+    renderItem,
+    reorderButtonText = { down: "\u2193", up: "\u2191" }
   } = config;
   const form = useFormContext3();
   if (!form || !form.control) {
     return null;
   }
   const { control } = form;
-  const { append, fields, remove } = useFieldArray({
+  const { append, fields, move, remove } = useFieldArray({
     control,
     name
     // FieldArray name
@@ -458,18 +463,22 @@ function FieldArrayField({
   const canRemove = fields.length > min;
   const handleAdd = () => {
     if (canAdd) {
-      const defaultValues = fieldConfigs.reduce((acc, fieldConfig) => {
-        const fieldName = fieldConfig.name;
-        if (fieldConfig.type === "checkbox" || fieldConfig.type === "switch") {
-          acc[fieldName] = false;
-        } else if (fieldConfig.type === "slider") {
-          acc[fieldName] = 0;
-        } else {
-          acc[fieldName] = "";
-        }
-        return acc;
-      }, {});
-      append(defaultValues);
+      if (defaultItem) {
+        append(defaultItem());
+      } else {
+        const defaultValues = fieldConfigs.reduce((acc, fieldConfig) => {
+          const fieldName = fieldConfig.name;
+          if (fieldConfig.type === "checkbox" || fieldConfig.type === "switch") {
+            acc[fieldName] = false;
+          } else if (fieldConfig.type === "slider") {
+            acc[fieldName] = 0;
+          } else {
+            acc[fieldName] = "";
+          }
+          return acc;
+        }, {});
+        append(defaultValues);
+      }
     }
   };
   const handleRemove = (index) => {
@@ -477,60 +486,131 @@ function FieldArrayField({
       remove(index);
     }
   };
-  return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      key: field2.id,
-      className: "border border-gray-200 rounded-lg p-4 space-y-4"
-    },
-    /* @__PURE__ */ React8.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React8.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React8.createElement(
+  const handleMoveUp = (index) => {
+    if (index > 0) {
+      move(index, index - 1);
+    }
+  };
+  const handleMoveDown = (index) => {
+    if (index < fields.length - 1) {
+      move(index, index + 1);
+    }
+  };
+  const renderFieldArrayItems = () => {
+    return fields.map((field2, index) => {
+      const canMoveUp = enableReordering && index > 0;
+      const canMoveDown = enableReordering && index < fields.length - 1;
+      const itemCanRemove = canRemove;
+      const fieldElements = fieldConfigs.map((fieldConfig) => {
+        const fieldName = fieldConfig.name;
+        const fullPath = `${name}.${index}.${fieldName}`;
+        let processedConfig = { ...fieldConfig, name: fullPath };
+        if ("dependsOn" in fieldConfig && fieldConfig.dependsOn && typeof fieldConfig.dependsOn === "string") {
+          const dependsOnPath = fieldConfig.dependsOn;
+          if (!dependsOnPath.startsWith(`${name}.`)) {
+            processedConfig = {
+              ...processedConfig,
+              dependsOn: `${name}.${index}.${dependsOnPath}`,
+              // Preserve dependsOnValue if it exists
+              ..."dependsOnValue" in fieldConfig && {
+                dependsOnValue: fieldConfig.dependsOnValue
+              }
+            };
+          }
+        }
+        return /* @__PURE__ */ React8.createElement(
+          FormField,
+          {
+            key: `${fieldConfig.name}-${index}`,
+            config: processedConfig,
+            form,
+            submissionState: {
+              error: void 0,
+              isSubmitted: false,
+              isSubmitting: false,
+              isSuccess: false
+            }
+          }
+        );
+      });
+      if (renderItem) {
+        return /* @__PURE__ */ React8.createElement(React8.Fragment, { key: field2.id }, renderItem({
+          canMoveDown,
+          canMoveUp,
+          canRemove: itemCanRemove,
+          children: /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldElements),
+          field: field2,
+          fields,
+          index,
+          onMoveDown: () => handleMoveDown(index),
+          onMoveUp: () => handleMoveUp(index),
+          onRemove: () => handleRemove(index)
+        }));
+      }
+      return /* @__PURE__ */ React8.createElement(
+        "div",
+        {
+          key: field2.id,
+          className: "border border-gray-200 rounded-lg p-4 space-y-4"
+        },
+        /* @__PURE__ */ React8.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React8.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), /* @__PURE__ */ React8.createElement("div", { className: "flex gap-2" }, enableReordering && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            isDisabled: !canMoveUp,
+            onPress: () => handleMoveUp(index),
+            "aria-label": `Move ${config.label} ${index + 1} up`
+          },
+          reorderButtonText.up
+        ), /* @__PURE__ */ React8.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            isDisabled: !canMoveDown,
+            onPress: () => handleMoveDown(index),
+            "aria-label": `Move ${config.label} ${index + 1} down`
+          },
+          reorderButtonText.down
+        )), itemCanRemove && /* @__PURE__ */ React8.createElement(
+          Button2,
+          {
+            size: "sm",
+            variant: "light",
+            color: "danger",
+            startContent: "\u{1F5D1}\uFE0F",
+            onPress: () => handleRemove(index),
+            "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
+          },
+          removeButtonText
+        ))),
+        /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldElements)
+      );
+    });
+  };
+  const renderAddButtonElement = () => {
+    if (renderAddButton) {
+      return renderAddButton({
+        canAdd,
+        onAdd: handleAdd
+      });
+    }
+    if (!canAdd) {
+      return null;
+    }
+    return /* @__PURE__ */ React8.createElement(
       Button2,
       {
-        size: "sm",
-        variant: "light",
-        color: "danger",
-        startContent: "\u{1F5D1}\uFE0F",
-        onPress: () => handleRemove(index),
-        "aria-label": `${removeButtonText} ${config.label} ${index + 1}`
+        variant: "bordered",
+        startContent: "\u2795",
+        onPress: handleAdd,
+        className: "w-full"
       },
-      removeButtonText
-    )),
-    /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React8.createElement(
-      FormField,
-      {
-        key: `${fieldConfig.name}-${index}`,
-        config: {
-          ...fieldConfig,
-          name: `${name}.${index}.${fieldConfig.name}`
-        },
-        form,
-        submissionState: {
-          error: void 0,
-          isSubmitted: false,
-          isSubmitting: false,
-          isSuccess: false
-        }
-      }
-    )))
-  )), canAdd && /* @__PURE__ */ React8.createElement(
-    Button2,
-    {
-      variant: "bordered",
-      startContent: "\u2795",
-      onPress: handleAdd,
-      className: "w-full"
-    },
-    addButtonText
-  ), fields.length === 0 && /* @__PURE__ */ React8.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React8.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React8.createElement(
-    Button2,
-    {
-      variant: "bordered",
-      startContent: "\u2795",
-      onPress: handleAdd,
-      className: "mt-2"
-    },
-    addButtonText
-  ))));
+      addButtonText
+    );
+  };
+  return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-4" }, fields.length > 0 ? renderFieldArrayItems() : /* @__PURE__ */ React8.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React8.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), renderAddButtonElement()), fields.length > 0 && renderAddButtonElement()));
 }
 
 // src/fields/FileField.tsx
@@ -1056,7 +1136,7 @@ var FormField = React17.memo(
       return null;
     }
     if (config.dependsOn) {
-      const dependentValue = watchedValues[config.dependsOn];
+      const dependentValue = get(watchedValues, config.dependsOn);
       if (config.dependsOnValue !== void 0 && dependentValue !== config.dependsOnValue) {
         return null;
       }
@@ -2340,6 +2420,44 @@ function ZodForm({
   ))));
 }
 
+// src/components/SimpleForm.tsx
+import React24 from "react";
+function SimpleForm({
+  className,
+  defaultValues,
+  field: field2,
+  hideSubmitButton = false,
+  onError,
+  onSubmit,
+  onSuccess,
+  schema,
+  submitButton,
+  subtitle,
+  title
+}) {
+  return /* @__PURE__ */ React24.createElement(
+    ZodForm,
+    {
+      className,
+      config: {
+        defaultValues,
+        fields: [field2],
+        schema
+      },
+      onError,
+      onSubmit,
+      onSuccess,
+      showResetButton: false,
+      submitButtonText: hideSubmitButton ? "" : "Submit",
+      subtitle,
+      title,
+      submitButtonProps: hideSubmitButton && submitButton ? {
+        style: { display: "none" }
+      } : {}
+    }
+  );
+}
+
 // src/builders/BasicFormBuilder.ts
 var BasicFormBuilder = class {
   constructor() {
@@ -2444,9 +2562,27 @@ function createBasicFormBuilder() {
 var FormFieldHelpers = {
   /**
    * Create an autocomplete field
+   *
+   * @example
+   * ```tsx
+   * // Simple autocomplete
+   * FormFieldHelpers.autocomplete("country", "Country", options)
+   *
+   * // With placeholder
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries")
+   *
+   * // With full customization
+   * FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", {
+   *   classNames: { base: "custom-autocomplete" },
+   *   allowsCustomValue: true
+   * })
+   * ```
    */
-  autocomplete: (name, label, items, placeholder) => ({
-    autocompleteProps: placeholder ? { placeholder } : void 0,
+  autocomplete: (name, label, items, placeholder, autocompleteProps) => ({
+    autocompleteProps: {
+      ...placeholder && { placeholder },
+      ...autocompleteProps
+    },
     label,
     name,
     options: items,
@@ -2454,8 +2590,21 @@ var FormFieldHelpers = {
   }),
   /**
    * Create a checkbox field
+   *
+   * @example
+   * ```tsx
+   * // Simple checkbox
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
+   *
+   * // With full customization
+   * FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
+   *   classNames: { base: "custom-checkbox" },
+   *   size: "lg"
+   * })
+   * ```
    */
-  checkbox: (name, label) => ({
+  checkbox: (name, label, checkboxProps) => ({
+    checkboxProps,
     label,
     name,
     type: "checkbox"
@@ -2517,6 +2666,19 @@ var FormFieldHelpers = {
   },
   /**
    * Create a date field
+   *
+   * @example
+   * ```tsx
+   * // Simple date field
+   * FormFieldHelpers.date("birthDate", "Birth Date")
+   *
+   * // With full customization
+   * FormFieldHelpers.date("birthDate", "Birth Date", {
+   *   label: "Select your birth date",
+   *   granularity: "day",
+   *   minValue: new CalendarDate(1900, 1, 1)
+   * })
+   * ```
    */
   date: (name, label, dateProps) => ({
     dateProps,
@@ -2524,40 +2686,211 @@ var FormFieldHelpers = {
     name,
     type: "date"
   }),
+  /**
+   * Create a file upload field
+   *
+   * @example
+   * ```tsx
+   * // Simple file field
+   * FormFieldHelpers.file("avatar", "Profile Picture")
+   *
+   * // With accept and multiple
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: true
+   * })
+   *
+   * // With full customization
+   * FormFieldHelpers.file("avatar", "Profile Picture", {
+   *   accept: "image/*",
+   *   multiple: false,
+   *   fileProps: { className: "custom-file-input" }
+   * })
+   * ```
+   */
+  file: (name, label, options) => ({
+    accept: options?.accept,
+    fileProps: options?.fileProps,
+    label,
+    multiple: options?.multiple,
+    name,
+    type: "file"
+  }),
+  /**
+   * Create a font picker field
+   *
+   * @example
+   * ```tsx
+   * // Simple font picker
+   * FormFieldHelpers.fontPicker("font", "Choose Font")
+   *
+   * // With full customization
+   * FormFieldHelpers.fontPicker("font", "Choose Font", {
+   *   showFontPreview: true,
+   *   loadAllVariants: false,
+   *   fontsLoadedTimeout: 5000
+   * })
+   * ```
+   */
+  fontPicker: (name, label, fontPickerProps) => ({
+    fontPickerProps,
+    label,
+    name,
+    type: "fontPicker"
+  }),
   /**
    * Create an input field
+   *
+   * @example
+   * ```tsx
+   * // Simple input
+   * FormFieldHelpers.input("name", "Name")
+   *
+   * // With type
+   * FormFieldHelpers.input("email", "Email", "email")
+   *
+   * // With full customization
+   * FormFieldHelpers.input("email", "Email", "email", {
+   *   placeholder: "Enter your email",
+   *   classNames: { input: "custom-input" },
+   *   startContent: <MailIcon />,
+   *   description: "We'll never share your email"
+   * })
+   * ```
    */
-  input: (name, label, type = "text") => ({
-    inputProps: { type },
+  input: (name, label, type, inputProps) => ({
+    inputProps: {
+      type: type || "text",
+      ...inputProps
+    },
     label,
     name,
     type: "input"
   }),
+  /**
+   * Create a radio group field
+   *
+   * @example
+   * ```tsx
+   * // Simple radio group
+   * FormFieldHelpers.radio("gender", "Gender", [
+   *   { label: "Male", value: "male" },
+   *   { label: "Female", value: "female" }
+   * ])
+   *
+   * // With full customization
+   * FormFieldHelpers.radio("gender", "Gender", options, {
+   *   orientation: "horizontal",
+   *   classNames: { base: "custom-radio" }
+   * })
+   * ```
+   */
+  radio: (name, label, options, radioProps) => ({
+    label,
+    name,
+    radioOptions: options,
+    radioProps,
+    type: "radio"
+  }),
   /**
    * Create a select field
+   *
+   * @example
+   * ```tsx
+   * // Simple select
+   * FormFieldHelpers.select("country", "Country", options)
+   *
+   * // With full customization
+   * FormFieldHelpers.select("country", "Country", options, {
+   *   placeholder: "Select a country",
+   *   classNames: { trigger: "custom-select" },
+   *   selectionMode: "multiple"
+   * })
+   * ```
    */
-  select: (name, label, options) => ({
+  select: (name, label, options, selectProps) => ({
     label,
     name,
     options,
+    selectProps,
     type: "select"
   }),
+  /**
+   * Create a slider field
+   *
+   * @example
+   * ```tsx
+   * // Simple slider
+   * FormFieldHelpers.slider("rating", "Rating")
+   *
+   * // With full customization
+   * FormFieldHelpers.slider("rating", "Rating", {
+   *   minValue: 1,
+   *   maxValue: 5,
+   *   step: 1,
+   *   showSteps: true,
+   *   classNames: { base: "custom-slider" }
+   * })
+   * ```
+   */
+  slider: (name, label, sliderProps) => ({
+    label,
+    name,
+    sliderProps,
+    type: "slider"
+  }),
   /**
    * Create a switch field
+   *
+   * @example
+   * ```tsx
+   * // Simple switch
+   * FormFieldHelpers.switch("notifications", "Enable notifications")
+   *
+   * // With description
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
+   *
+   * // With full customization
+   * FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
+   *   classNames: { base: "custom-switch" },
+   *   size: "lg",
+   *   color: "primary"
+   * })
+   * ```
    */
-  switch: (name, label, description) => ({
+  switch: (name, label, description, switchProps) => ({
     description,
     label,
     name,
+    switchProps,
     type: "switch"
   }),
   /**
    * Create a textarea field
+   *
+   * @example
+   * ```tsx
+   * // Simple textarea
+   * FormFieldHelpers.textarea("message", "Message")
+   *
+   * // With placeholder
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message")
+   *
+   * // With full customization
+   * FormFieldHelpers.textarea("message", "Message", "Enter your message", {
+   *   classNames: { input: "custom-textarea" },
+   *   minRows: 3,
+   *   maxRows: 10
+   * })
+   * ```
    */
-  textarea: (name, label, placeholder) => ({
+  textarea: (name, label, placeholder, textareaProps) => ({
     label,
     name,
-    textareaProps: { placeholder },
+    textareaProps: {
+      ...placeholder && { placeholder },
+      ...textareaProps
+    },
     type: "textarea"
   })
 };
@@ -2698,11 +3031,10 @@ function sliderField(name, label, props) {
     type: "slider",
     ...props && {
       sliderProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        max: props.max || 100,
-        min: props.min || 0,
-        step: props.step || 1
+        className: props.className,
+        maxValue: props.max ?? 100,
+        minValue: props.min ?? 0,
+        step: props.step ?? 1
       }
     }
   };
@@ -2714,9 +3046,8 @@ function dateField(name, label, props) {
     type: "date",
     ...props && {
       dateProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false,
-        placeholder: props.placeholder || ""
+        className: props.className,
+        placeholder: props.placeholder
       }
     }
   };
@@ -2738,15 +3069,12 @@ function fileField(name, label, props) {
 }
 function fontPickerField(name, label, props) {
   return {
+    className: props?.className,
+    description: props?.description,
+    fontPickerProps: props?.fontPickerProps,
     label,
     name,
-    type: "fontPicker",
-    ...props && {
-      fontPickerProps: {
-        className: props.className || "",
-        disabled: props.isDisabled || false
-      }
-    }
+    type: "fontPicker"
   };
 }
 function contentField(title, description, options) {
@@ -3068,7 +3396,12 @@ var TypeInferredBuilder = class {
     this.formFields.push({
       label,
       name,
-      sliderProps: { max, min, step, ...fieldOptions },
+      sliderProps: {
+        maxValue: max,
+        minValue: min,
+        step,
+        ...fieldOptions
+      },
       type: "slider"
     });
     return this;
@@ -3533,6 +3866,131 @@ function useMemoizedFieldProps(props, deps) {
   return useMemo2(() => props, deps);
 }
 
+// src/utils/arraySync.ts
+function syncArrays(options) {
+  const { current, existing, getId } = options;
+  const existingMap = /* @__PURE__ */ new Map();
+  const currentMap = /* @__PURE__ */ new Map();
+  existing.forEach((item) => {
+    const id = getId(item);
+    if (id !== void 0) {
+      existingMap.set(id, item);
+    }
+  });
+  current.forEach((item) => {
+    const id = getId(item);
+    if (id !== void 0) {
+      currentMap.set(id, item);
+    }
+  });
+  const toDelete = [];
+  existingMap.forEach((item, id) => {
+    if (!currentMap.has(id)) {
+      toDelete.push(item);
+    }
+  });
+  const toUpdate = [];
+  existingMap.forEach((existingItem, id) => {
+    const currentItem = currentMap.get(id);
+    if (currentItem) {
+      toUpdate.push({ current: currentItem, existing: existingItem });
+    }
+  });
+  const toCreate = [];
+  currentMap.forEach((item, id) => {
+    if (!existingMap.has(id)) {
+      toCreate.push(item);
+    }
+  });
+  return {
+    toCreate,
+    toDelete,
+    toUpdate
+  };
+}
+
+// src/utils/createFieldArrayCustomConfig.tsx
+import React25 from "react";
+import { useFieldArray as useFieldArray2 } from "react-hook-form";
+import { Button as Button6 } from "@heroui/react";
+function createFieldArrayCustomConfig(options) {
+  const {
+    className,
+    defaultItem,
+    enableReordering = false,
+    label,
+    max = 10,
+    min = 0,
+    name,
+    renderAddButton,
+    renderItem
+  } = options;
+  return {
+    className,
+    label,
+    name,
+    // ArrayPath is compatible with Path for CustomFieldConfig
+    render: ({ control, errors, form }) => {
+      const { append, fields, move, remove } = useFieldArray2({
+        control,
+        name
+      });
+      const canAdd = fields.length < max;
+      const canRemove = fields.length > min;
+      const handleAdd = () => {
+        if (canAdd) {
+          if (defaultItem) {
+            append(defaultItem());
+          } else {
+            append({});
+          }
+        }
+      };
+      const handleRemove = (index) => {
+        if (canRemove) {
+          remove(index);
+        }
+      };
+      const handleMoveUp = (index) => {
+        if (enableReordering && index > 0) {
+          move(index, index - 1);
+        }
+      };
+      const handleMoveDown = (index) => {
+        if (enableReordering && index < fields.length - 1) {
+          move(index, index + 1);
+        }
+      };
+      return /* @__PURE__ */ React25.createElement("div", { className }, /* @__PURE__ */ React25.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => {
+        const canMoveUp = enableReordering && index > 0;
+        const canMoveDown = enableReordering && index < fields.length - 1;
+        return /* @__PURE__ */ React25.createElement(React25.Fragment, { key: field2.id }, renderItem({
+          canMoveDown,
+          canMoveUp,
+          control,
+          errors,
+          field: field2,
+          fields,
+          form,
+          index,
+          onMoveDown: () => handleMoveDown(index),
+          onMoveUp: () => handleMoveUp(index),
+          onRemove: () => handleRemove(index)
+        }));
+      }), fields.length === 0 && renderAddButton ? /* @__PURE__ */ React25.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React25.createElement("p", null, "No ", label?.toLowerCase() || "items", " added yet."), renderAddButton({ canAdd, onAdd: handleAdd })) : null, fields.length > 0 && renderAddButton ? renderAddButton({ canAdd, onAdd: handleAdd }) : canAdd && /* @__PURE__ */ React25.createElement(
+        Button6,
+        {
+          variant: "bordered",
+          onPress: handleAdd,
+          className: "w-full"
+        },
+        "Add Item"
+      )));
+    },
+    type: "custom"
+  };
+}
+
 // src/builders/validation-helpers.ts
 import { z as z4 } from "zod";
 var validationPatterns = {
@@ -3706,6 +4164,7 @@ export {
   RadioGroupField,
   SelectField,
   ServerActionForm,
+  SimpleForm,
   SliderField,
   SubmitButton,
   SwitchField,
@@ -3721,6 +4180,7 @@ export {
   createEmailSchema,
   createField,
   createFieldArrayBuilder,
+  createFieldArrayCustomConfig,
   createFieldArrayItemBuilder,
   createFileSchema,
   createFormTestUtils,
@@ -3754,6 +4214,7 @@ export {
   shallowEqual,
   simulateFieldInput,
   simulateFormSubmission,
+  syncArrays,
   throttle,
   useDebouncedFieldValidation,
   useDebouncedValidation,