@uniform-ts/core 0.0.7 → 0.0.9

package/dist/index.js

@@ -657,6 +657,24 @@ function SelectField({
     }
   );
 }
+function useConditionalFields(fields, control, scopeName) {
+  const allValues = reactHookForm.useWatch({ control });
+  const scopedValues = reactHookForm.useWatch({ control, name: scopeName });
+  const values = scopeName ? scopedValues : allValues;
+  return React3.useMemo(() => {
+    return fields.filter((field) => {
+      if (field.meta.hidden) return false;
+      if (typeof field.meta.condition === "function") {
+        return field.meta.condition(values);
+      }
+      return true;
+    }).sort((a, b) => {
+      const orderA = typeof a.meta.order === "number" ? a.meta.order : Infinity;
+      const orderB = typeof b.meta.order === "number" ? b.meta.order : Infinity;
+      return orderA - orderB;
+    });
+  }, [fields, values]);
+}
 function ObjectField({
   field,
   control,
@@ -665,7 +683,7 @@ function ObjectField({
   shouldUnregister
 }) {
   const { classNames, layout } = useAutoFormContext();
-  const children = field.children;
+  const children = useConditionalFields(field.children, control, namePrefix);
   const content = children.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
     FieldRenderer,
     {
@@ -720,6 +738,124 @@ function getDefaultValue(field) {
       return void 0;
   }
 }
+
+// src/utils/reindexDynamicMeta.ts
+function buildKeyPattern(arrayName) {
+  return new RegExp(`^${escapeRegExp(arrayName)}\\.(\\d+)\\.(.+)$`);
+}
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function reindexDynamicMeta(dynamicMeta, arrayName, mutation) {
+  const pattern = buildKeyPattern(arrayName);
+  const matched = [];
+  const result = {};
+  for (const [key, value] of Object.entries(dynamicMeta)) {
+    const match = pattern.exec(key);
+    if (match) {
+      matched.push({
+        key,
+        index: parseInt(match[1], 10),
+        childField: match[2],
+        value
+      });
+    } else {
+      result[key] = value;
+    }
+  }
+  if (!isValidMutation(mutation)) {
+    return dynamicMeta;
+  }
+  switch (mutation.type) {
+    case "remove":
+      applyRemove(matched, mutation.index, arrayName, result);
+      break;
+    case "move":
+      applyMove(matched, mutation.from, mutation.to, arrayName, result);
+      break;
+    case "duplicate":
+      applyDuplicate(matched, mutation.index, arrayName, result);
+      break;
+    case "add":
+      applyAdd(matched, mutation.index, arrayName, result);
+      break;
+  }
+  return result;
+}
+function isValidMutation(mutation, _entries) {
+  switch (mutation.type) {
+    case "remove":
+      return mutation.index >= 0;
+    case "move":
+      return mutation.from >= 0 && mutation.to >= 0;
+    case "duplicate":
+      return mutation.index >= 0;
+    case "add":
+      return mutation.index >= 0;
+  }
+}
+function buildKey(arrayName, index, childField) {
+  return `${arrayName}.${index}.${childField}`;
+}
+function applyRemove(entries, removedIndex, arrayName, result) {
+  for (const entry of entries) {
+    if (entry.index === removedIndex) {
+      continue;
+    } else if (entry.index > removedIndex) {
+      result[buildKey(arrayName, entry.index - 1, entry.childField)] = entry.value;
+    } else {
+      result[buildKey(arrayName, entry.index, entry.childField)] = entry.value;
+    }
+  }
+}
+function applyMove(entries, from, to, arrayName, result) {
+  if (from === to) {
+    for (const entry of entries) {
+      result[buildKey(arrayName, entry.index, entry.childField)] = entry.value;
+    }
+    return;
+  }
+  for (const entry of entries) {
+    let newIndex;
+    if (entry.index === from) {
+      newIndex = to;
+    } else if (from < to) {
+      if (entry.index > from && entry.index <= to) {
+        newIndex = entry.index - 1;
+      } else {
+        newIndex = entry.index;
+      }
+    } else {
+      if (entry.index >= to && entry.index < from) {
+        newIndex = entry.index + 1;
+      } else {
+        newIndex = entry.index;
+      }
+    }
+    result[buildKey(arrayName, newIndex, entry.childField)] = entry.value;
+  }
+}
+function applyDuplicate(entries, sourceIndex, arrayName, result) {
+  for (const entry of entries) {
+    if (entry.index === sourceIndex) {
+      result[buildKey(arrayName, entry.index, entry.childField)] = entry.value;
+      result[buildKey(arrayName, sourceIndex + 1, entry.childField)] = entry.value;
+    } else if (entry.index > sourceIndex) {
+      result[buildKey(arrayName, entry.index + 1, entry.childField)] = entry.value;
+    } else {
+      result[buildKey(arrayName, entry.index, entry.childField)] = entry.value;
+    }
+  }
+}
+function applyAdd(entries, newIndex, arrayName, result) {
+  for (const entry of entries) {
+    if (entry.index >= newIndex) {
+      result[buildKey(arrayName, entry.index + 1, entry.childField)] = entry.value;
+    } else {
+      result[buildKey(arrayName, entry.index, entry.childField)] = entry.value;
+    }
+  }
+}
 function getRowSummary(row, itemConfig, index, itemSummary) {
   if (itemConfig.type === "object") {
     for (const child of itemConfig.children) {
@@ -732,8 +868,43 @@ function getRowSummary(row, itemConfig, index, itemSummary) {
   }
   return itemSummary?.(index) ?? `Item ${index + 1}`;
 }
+function bindRowIndexToItemConfig(itemConfig, rowIndex) {
+  if (itemConfig.type !== "object") return itemConfig;
+  const children = itemConfig.children.map((child) => {
+    if (!child.meta.onChange) return child;
+    const originalOnChange = child.meta.onChange;
+    return {
+      ...child,
+      meta: {
+        ...child.meta,
+        onChange: (value, formMethods) => {
+          void originalOnChange(value, formMethods, rowIndex);
+        }
+      }
+    };
+  });
+  return { ...itemConfig, children };
+}
+function applyRowDynamicMeta(itemConfig, rowOverrides) {
+  if (itemConfig.type !== "object") return itemConfig;
+  const children = itemConfig.children.map((child) => {
+    const override = rowOverrides[child.name];
+    if (!override) return child;
+    const { options, label, ...metaOverrides } = override;
+    let updated = {
+      ...child,
+      ...label !== void 0 ? { label } : {},
+      meta: { ...child.meta, ...metaOverrides }
+    };
+    if (options !== void 0 && updated.type === "select") {
+      updated = { ...updated, options };
+    }
+    return updated;
+  });
+  return { ...itemConfig, children };
+}
 function ArrayField({ field, control, effectiveName }) {
-  const { classNames, layout, labels } = useAutoFormContext();
+  const { classNames, layout, labels, setDynamicMeta } = useAutoFormContext();
   const {
     fields: rows,
     append,
@@ -779,9 +950,10 @@ function ArrayField({ field, control, effectiveName }) {
   } = layout.arrayButtons;
   const ArrayFieldLayout = layout.arrayFieldLayout;
   const RowLayout = layout.arrayRowLayout;
+  const rowDynamicMeta = field._rowDynamicMeta;
   const renderedRows = rows.map((row, index) => {
     const isCollapsed = showCollapse && collapsed.has(index);
-    const collapseButton = showCollapse ? /* @__PURE__ */ jsxRuntime.jsxs(
+    const collapseButton = showCollapse && CollapseBtn ? /* @__PURE__ */ jsxRuntime.jsxs(
       CollapseBtn,
       {
         type: "button",
@@ -805,29 +977,47 @@ function ArrayField({ field, control, effectiveName }) {
         ]
       }
     ) : null;
-    const moveUpButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+    const moveUpButton = showMove && rows.length > 1 && MoveUpBtn ? /* @__PURE__ */ jsxRuntime.jsx(
       MoveUpBtn,
       {
         type: "button",
         className: classNames.arrayMove,
-        onClick: () => move(index, index - 1),
+        onClick: () => {
+          move(index, index - 1);
+          setDynamicMeta(
+            (prev) => reindexDynamicMeta(prev, effectiveName, {
+              type: "move",
+              from: index,
+              to: index - 1
+            })
+          );
+        },
         disabled: index === 0,
         "aria-label": labels.arrayAriaMoveUp?.(index) ?? `Move item ${index + 1} up`,
         children: labels.arrayMoveUp ?? "\u2191"
       }
     ) : null;
-    const moveDownButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+    const moveDownButton = showMove && rows.length > 1 && MoveDownBtn ? /* @__PURE__ */ jsxRuntime.jsx(
       MoveDownBtn,
       {
         type: "button",
         className: classNames.arrayMove,
-        onClick: () => move(index, index + 1),
+        onClick: () => {
+          move(index, index + 1);
+          setDynamicMeta(
+            (prev) => reindexDynamicMeta(prev, effectiveName, {
+              type: "move",
+              from: index,
+              to: index + 1
+            })
+          );
+        },
         disabled: index === rows.length - 1,
         "aria-label": labels.arrayAriaMoveDown?.(index) ?? `Move item ${index + 1} down`,
         children: labels.arrayMoveDown ?? "\u2193"
       }
     ) : null;
-    const duplicateButton = showDuplicate && !atMax ? /* @__PURE__ */ jsxRuntime.jsx(
+    const duplicateButton = showDuplicate && !atMax && DuplicateBtn ? /* @__PURE__ */ jsxRuntime.jsx(
       DuplicateBtn,
       {
         type: "button",
@@ -837,26 +1027,43 @@ function ArrayField({ field, control, effectiveName }) {
             Object.entries(row).filter(([k]) => k !== "id")
           );
           insert(index + 1, values);
+          setDynamicMeta(
+            (prev) => reindexDynamicMeta(prev, effectiveName, {
+              type: "duplicate",
+              index
+            })
+          );
         },
         "aria-label": labels.arrayAriaDuplicate?.(index) ?? `Duplicate item ${index + 1}`,
         children: labels.arrayDuplicate ?? "Duplicate"
       }
     ) : null;
-    const removeButton = /* @__PURE__ */ jsxRuntime.jsx(
+    const removeButton = RemoveBtn ? /* @__PURE__ */ jsxRuntime.jsx(
       RemoveBtn,
       {
         type: "button",
         className: classNames.arrayRemove,
-        onClick: () => remove(index),
+        onClick: () => {
+          remove(index);
+          setDynamicMeta(
+            (prev) => reindexDynamicMeta(prev, effectiveName, {
+              type: "remove",
+              index
+            })
+          );
+        },
         disabled: atMin,
         "aria-label": labels.arrayAriaRemove?.(index) ?? `Remove item ${index + 1}`,
         children: labels.arrayRemove ?? "Remove"
       }
-    );
+    ) : null;
     const fieldContent = !isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       FieldRenderer,
       {
-        field: effectiveItemConfig,
+        field: bindRowIndexToItemConfig(
+          rowDynamicMeta?.[index] ? applyRowDynamicMeta(effectiveItemConfig, rowDynamicMeta[index]) : effectiveItemConfig,
+          index
+        ),
         control,
         namePrefix: `${effectiveName}.${index}`
       }
@@ -878,16 +1085,25 @@ function ArrayField({ field, control, effectiveName }) {
       row.id
     );
   });
-  const addButton = /* @__PURE__ */ jsxRuntime.jsx(
+  const addButton = AddBtn ? /* @__PURE__ */ jsxRuntime.jsx(
     AddBtn,
     {
       type: "button",
       className: classNames.arrayAdd,
       disabled: atMax,
-      onClick: () => append(getDefaultValue(itemConfig)),
+      onClick: () => {
+        const newIndex = rows.length;
+        append(getDefaultValue(itemConfig));
+        setDynamicMeta(
+          (prev) => reindexDynamicMeta(prev, effectiveName, {
+            type: "add",
+            index: newIndex
+          })
+        );
+      },
       children: labels.arrayAdd ?? "Add"
     }
-  );
+  ) : null;
   const content = /* @__PURE__ */ jsxRuntime.jsx(
     ArrayFieldLayout,
     {
@@ -1049,22 +1265,6 @@ function FieldRenderer({
     }
   );
 }
-function useConditionalFields(fields, control) {
-  const values = reactHookForm.useWatch({ control });
-  return React3.useMemo(() => {
-    return fields.filter((field) => {
-      if (field.meta.hidden) return false;
-      if (typeof field.meta.condition === "function") {
-        return field.meta.condition(values);
-      }
-      return true;
-    }).sort((a, b) => {
-      const orderA = typeof a.meta.order === "number" ? a.meta.order : Infinity;
-      const orderB = typeof b.meta.order === "number" ? b.meta.order : Infinity;
-      return orderA - orderB;
-    });
-  }, [fields, values]);
-}
 function useSectionGrouping(fields) {
   return React3.useMemo(() => {
     const ungrouped = [];
@@ -1153,6 +1353,28 @@ function useLatestRef(value) {
   return ref;
 }
 
+// src/utils/createRowScopedContext.ts
+function createRowScopedContext(baseCtx, arrayName, rowIndex, itemFieldNames, getValues) {
+  return {
+    ...baseCtx,
+    getValues,
+    setFieldMeta: (field, meta) => {
+      const fieldStr = field;
+      const prefix = arrayName + ".";
+      const childName = fieldStr.startsWith(prefix) ? fieldStr.slice(prefix.length) : fieldStr;
+      if (itemFieldNames.has(childName)) {
+        const qualifiedKey = `${arrayName}.${rowIndex}.${childName}`;
+        baseCtx.setFieldMeta(
+          qualifiedKey,
+          meta
+        );
+      } else {
+        baseCtx.setFieldMeta(field, meta);
+      }
+    }
+  };
+}
+
 // src/utils/fieldPipeline.ts
 function applyFieldOverrides(fields, overrides) {
   return fields.map((field) => {
@@ -1213,10 +1435,74 @@ function injectOnChangeHandlers(fields, uniForm, ctx, handlerKeys = new Set(uniF
     } else if (updated.type === "array") {
       const prefix = field.name + ".";
       const itemKeys = /* @__PURE__ */ new Set();
+      const indexedKeys = /* @__PURE__ */ new Set();
       for (const key of handlerKeys) {
-        if (key.startsWith(prefix)) itemKeys.add(key.slice(prefix.length));
+        if (key.startsWith(prefix)) {
+          const remainder = key.slice(prefix.length);
+          const indexMatch = remainder.match(/^(\d+)\.(.+)$/);
+          if (indexMatch) {
+            indexedKeys.add(remainder);
+            itemKeys.add(indexMatch[2]);
+          } else {
+            itemKeys.add(remainder);
+          }
+        }
       }
-      if (itemKeys.size) {
+      if (itemKeys.size && updated.itemConfig.type === "object") {
+        const itemFieldNames = new Set(
+          updated.itemConfig.children.map((c) => c.name)
+        );
+        const arrayName = field.name;
+        const newChildren = updated.itemConfig.children.map((child) => {
+          if (!itemKeys.has(child.name)) return child;
+          const existingOnChange = child.meta.onChange;
+          const rowAwareHandler = (value, formMethods, rowIndex) => {
+            void existingOnChange?.(value, formMethods);
+            const rowCtx = createRowScopedContext(
+              ctx,
+              arrayName,
+              rowIndex,
+              itemFieldNames,
+              () => {
+                const allValues = ctx.getValues();
+                const arrayValues = allValues?.[arrayName];
+                if (Array.isArray(arrayValues)) {
+                  return arrayValues[rowIndex] ?? {};
+                }
+                return {};
+              }
+            );
+            void uniForm._fireHandler(
+              `${arrayName}.${child.name}`,
+              value,
+              rowCtx
+            );
+            const indexedKey = `${rowIndex}.${child.name}`;
+            if (indexedKeys.has(indexedKey)) {
+              void uniForm._fireHandler(
+                `${arrayName}.${indexedKey}`,
+                value,
+                rowCtx
+              );
+            }
+          };
+          return {
+            ...child,
+            meta: {
+              ...child.meta,
+              // Cast to FieldMeta onChange type — ArrayField's bindRowIndexToItemConfig
+              // will call this with the rowIndex third argument at render time.
+              onChange: rowAwareHandler
+            }
+          };
+        });
+        const newItemConfig = {
+          ...updated.itemConfig,
+          children: newChildren
+        };
+        if (newItemConfig !== updated.itemConfig)
+          updated = { ...updated, itemConfig: newItemConfig };
+      } else if (itemKeys.size) {
         const remappedUniForm = {
           _getWatchedFields: () => Array.from(itemKeys),
           _fireHandlers: (name, value, c) => uniForm._fireHandler(`${field.name}.${name}`, value, c)
@@ -1262,18 +1548,43 @@ function injectConditions(fields, conditions) {
     return updated;
   });
 }
+var ROW_KEY_PATTERN = /^(.+?)\.(\d+)\.(.+)$/;
 function applyDynamicMeta(fields, overrides) {
   if (!Object.keys(overrides).length) return fields;
   return fields.map((field) => {
     const override = overrides[field.name];
-    if (!override) return field;
-    const { options, label, ...metaOverrides } = override;
-    return {
-      ...field,
-      ...label !== void 0 ? { label } : {},
-      ...options !== void 0 ? { options } : {},
-      meta: { ...field.meta, ...metaOverrides }
-    };
+    let updated = field;
+    if (override) {
+      const { options, label, ...metaOverrides } = override;
+      updated = {
+        ...field,
+        ...label !== void 0 ? { label } : {},
+        ...options !== void 0 ? { options } : {},
+        meta: { ...field.meta, ...metaOverrides }
+      };
+    }
+    if (updated.type === "array") {
+      const prefix = `${updated.name}.`;
+      let rowDynamicMeta;
+      for (const [key, value] of Object.entries(overrides)) {
+        if (!key.startsWith(prefix)) continue;
+        const match = ROW_KEY_PATTERN.exec(key);
+        if (!match) continue;
+        const [, matchedArrayName, indexStr, childField] = match;
+        if (matchedArrayName !== updated.name) continue;
+        const rowIndex = Number(indexStr);
+        if (!rowDynamicMeta) rowDynamicMeta = {};
+        if (!rowDynamicMeta[rowIndex]) rowDynamicMeta[rowIndex] = {};
+        rowDynamicMeta[rowIndex][childField] = value;
+      }
+      if (rowDynamicMeta) {
+        updated = {
+          ...updated,
+          _rowDynamicMeta: rowDynamicMeta
+        };
+      }
+    }
+    return updated;
   });
 }
 function buildDefaults(fields) {
@@ -1303,6 +1614,12 @@ function buildDefaults(fields) {
   }
   return result;
 }
+
+// src/utils/resolveNullableSlot.ts
+function resolveNullableSlot(slot, fallback) {
+  if (slot === null) return null;
+  return slot ?? fallback;
+}
 function AutoForm(props) {
   const {
     form: uniForm,
@@ -1527,24 +1844,33 @@ function AutoForm(props) {
   const visibleFields = useConditionalFields(fieldsWithDynamic, control);
   const sections = useSectionGrouping(visibleFields);
   const resolvedLayout = React3__namespace.useMemo(() => {
-    const base = layout?.arrayButtons?.base ?? DefaultArrayButton;
+    const base = resolveNullableSlot(
+      layout?.arrayButtons?.base,
+      DefaultArrayButton
+    );
     const slots = layout?.arrayButtons;
     return {
       formWrapper: layout?.formWrapper ?? DefaultFormWrapper,
       sectionWrapper: layout?.sectionWrapper ?? DefaultSectionWrapper,
-      submitButton: layout?.submitButton ?? DefaultSubmitButton,
+      submitButton: resolveNullableSlot(
+        layout?.submitButton,
+        DefaultSubmitButton
+      ),
       arrayRowLayout: layout?.arrayRowLayout ?? DefaultArrayRowLayout,
       arrayFieldLayout: layout?.arrayFieldLayout ?? DefaultArrayFieldLayout,
       objectWrapper: layout?.objectWrapper ?? DefaultObjectWrapper,
       arrayWrapper: layout?.arrayWrapper ?? DefaultArrayWrapper,
       arrayButtons: {
         base,
-        add: slots?.add ?? base,
-        remove: slots?.remove ?? base,
-        moveUp: slots?.moveUp ?? base,
-        moveDown: slots?.moveDown ?? base,
-        duplicate: slots?.duplicate ?? base,
-        collapse: slots?.collapse ?? DefaultArrayCollapseButton
+        add: resolveNullableSlot(slots?.add, base),
+        remove: resolveNullableSlot(slots?.remove, base),
+        moveUp: resolveNullableSlot(slots?.moveUp, base),
+        moveDown: resolveNullableSlot(slots?.moveDown, base),
+        duplicate: resolveNullableSlot(slots?.duplicate, base),
+        collapse: resolveNullableSlot(
+          slots?.collapse,
+          DefaultArrayCollapseButton
+        )
       },
       loadingFallback: layout?.loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading\u2026" })
     };
@@ -1566,6 +1892,7 @@ function AutoForm(props) {
   const contextValue = React3__namespace.useMemo(
     () => ({
       registry,
+      fieldConfigs: mergedFields,
       fieldOverrides: fieldOverridesProp,
       fieldWrapper: resolvedFieldWrapper,
       layout: resolvedLayout,
@@ -1574,10 +1901,13 @@ function AutoForm(props) {
       coercions,
       messages,
       labels,
-      formMethods
+      formMethods,
+      control,
+      setDynamicMeta
     }),
     [
       registry,
+      mergedFields,
       fieldOverridesProp,
       resolvedFieldWrapper,
       resolvedLayout,
@@ -1586,7 +1916,9 @@ function AutoForm(props) {
       coercions,
       messages,
       labels,
-      formMethods
+      formMethods,
+      control,
+      setDynamicMeta
     ]
   );
   if (isLoadingDefaults) {
@@ -1630,13 +1962,13 @@ function AutoForm(props) {
             section.title
           );
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        SubmitButton ? /* @__PURE__ */ jsxRuntime.jsx(
           SubmitButton,
           {
             isSubmitting: formState.isSubmitting,
             label: labels.submit ?? "Submit"
           }
-        )
+        ) : null
       ] })
     }
   ) });
@@ -1703,6 +2035,10 @@ var UniForm = class {
    * Replaces any previously registered handler for that field — only one
    * handler per field is kept. This prevents accidental handler accumulation
    * when called inside a React render cycle.
+   *
+   * Supports both generic array paths (`"tasks.priority"` — fires for all rows)
+   * and indexed paths (`"tasks.0.priority"` — fires only for row 0).
+   *
    * Returns `this` for fluent chaining.
    */
   setOnChange(field, handler) {
@@ -1735,6 +2071,34 @@ var UniForm = class {
 function createForm(schema) {
   return new UniForm(schema);
 }
+function findArrayConfig(fields, name) {
+  for (const field of fields) {
+    if (field.name === name) {
+      return field.type === "array" ? field : void 0;
+    }
+    if (field.type === "object") {
+      const found = findArrayConfig(field.children, name);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function useArrayField(fieldName) {
+  const { control, fieldConfigs } = useAutoFormContext();
+  const result = reactHookForm.useFieldArray({ control, name: fieldName });
+  const rowCount = result.fields.length;
+  const config = findArrayConfig(fieldConfigs, fieldName);
+  const minItems = config?.minItems;
+  const maxItems = config?.maxItems;
+  const canAdd = maxItems == null || rowCount < maxItems;
+  const atMin = minItems != null && rowCount <= minItems;
+  return {
+    ...result,
+    rowCount,
+    canAdd,
+    atMin
+  };
+}
 
 exports.AutoForm = AutoForm;
 exports.DefaultArrayButton = DefaultArrayButton;
@@ -1758,6 +2122,7 @@ exports.defaultRegistry = defaultRegistry;
 exports.introspectObjectSchema = introspectObjectSchema;
 exports.introspectSchema = introspectSchema;
 exports.mergeRegistries = mergeRegistries;
+exports.useArrayField = useArrayField;
 exports.useAutoFormContext = useAutoFormContext;
 exports.useConditionalFields = useConditionalFields;
 exports.useFormPersistence = useFormPersistence;