@rachelallyson/hero-hook-form 2.6.0 → 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() {
@@ -3748,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 = {
@@ -3921,6 +4164,7 @@ export {
   RadioGroupField,
   SelectField,
   ServerActionForm,
+  SimpleForm,
   SliderField,
   SubmitButton,
   SwitchField,
@@ -3936,6 +4180,7 @@ export {
   createEmailSchema,
   createField,
   createFieldArrayBuilder,
+  createFieldArrayCustomConfig,
   createFieldArrayItemBuilder,
   createFileSchema,
   createFormTestUtils,
@@ -3969,6 +4214,7 @@ export {
   shallowEqual,
   simulateFieldInput,
   simulateFormSubmission,
+  syncArrays,
   throttle,
   useDebouncedFieldValidation,
   useDebouncedValidation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",