@uniform-ts/core 0.0.3 → 0.0.5

package/dist/index.js

@@ -421,6 +421,46 @@ function DefaultArrayRowLayout({
     ] })
   ] });
 }
+function DefaultArrayFieldLayout({
+  rows,
+  addButton
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    rows,
+    addButton
+  ] });
+}
+function DefaultObjectWrapper({
+  children,
+  label,
+  className,
+  labelClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("legend", { className: labelClassName, children: label }),
+    children
+  ] });
+}
+function DefaultArrayWrapper({
+  children,
+  label,
+  className,
+  labelClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("legend", { className: labelClassName, children: label }),
+    children
+  ] });
+}
+function DefaultArrayButton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props });
+}
+function DefaultArrayCollapseButton({
+  isCollapsed: _isCollapsed,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props });
+}
 
 // src/utils/resolveErrorMessage.ts
 function resolveErrorMessage(fieldName, error, messages) {
@@ -624,6 +664,7 @@ function ObjectField({
   depth = 0,
   shouldUnregister
 }) {
+  const { classNames, layout } = useAutoFormContext();
   const children = field.children;
   const content = children.map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
     FieldRenderer,
@@ -640,10 +681,16 @@ function ObjectField({
   if (field.meta.section) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
-    field.label && /* @__PURE__ */ jsxRuntime.jsx("legend", { children: field.label }),
-    content
-  ] });
+  const ObjectWrapper = field.meta.wrapper ?? layout.objectWrapper;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ObjectWrapper,
+    {
+      label: field.label,
+      className: classNames.objectFieldset,
+      labelClassName: classNames.objectLegend,
+      children: content
+    }
+  );
 }
 
 // src/components/fields/getDefaultValue.ts
@@ -722,124 +769,147 @@ function ArrayField({ field, control, effectiveName }) {
     ...itemConfig,
     meta: { ...itemConfig.meta, section: field.meta.section }
   } : itemConfig;
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    rows.map((row, index) => {
-      const isCollapsed = showCollapse && collapsed.has(index);
-      const collapseButton = showCollapse ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: classNames.arrayCollapse,
-          onClick: () => toggleCollapse(index),
-          "aria-label": isCollapsed ? `Expand item ${index + 1}` : `Collapse item ${index + 1}`,
-          children: [
-            isCollapsed ? labels.arrayExpand ?? "\u25BC" : labels.arrayCollapse ?? "\u25B6",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CollapseSummary,
-              {
-                control,
-                effectiveName,
-                index,
-                itemConfig,
-                isCollapsed
-              }
-            )
-          ]
-        }
-      ) : null;
-      const moveUpButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames.arrayMove,
-          onClick: () => move(index, index - 1),
-          disabled: index === 0,
-          "aria-label": `Move item ${index + 1} up`,
-          children: labels.arrayMoveUp ?? "\u2191"
-        }
-      ) : null;
-      const moveDownButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames.arrayMove,
-          onClick: () => move(index, index + 1),
-          disabled: index === rows.length - 1,
-          "aria-label": `Move item ${index + 1} down`,
-          children: labels.arrayMoveDown ?? "\u2193"
-        }
-      ) : null;
-      const duplicateButton = showDuplicate && !atMax ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames.arrayDuplicate,
-          onClick: () => {
-            const values = Object.fromEntries(
-              Object.entries(row).filter(([k]) => k !== "id")
-            );
-            insert(index + 1, values);
-          },
-          "aria-label": `Duplicate item ${index + 1}`,
-          children: labels.arrayDuplicate ?? "Duplicate"
-        }
-      ) : null;
-      const removeButton = /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames.arrayRemove,
-          onClick: () => remove(index),
-          disabled: atMin,
-          "aria-label": `Remove item ${index + 1}`,
-          children: labels.arrayRemove ?? "Remove"
-        }
-      );
-      const fieldContent = !isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
-        FieldRenderer,
-        {
-          field: effectiveItemConfig,
-          control,
-          namePrefix: `${effectiveName}.${index}`
-        }
-      ) : null;
-      const RowLayout = layout.arrayRowLayout;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        RowLayout,
-        {
-          buttons: {
-            moveUp: moveUpButton,
-            moveDown: moveDownButton,
-            duplicate: duplicateButton,
-            remove: removeButton,
-            collapse: collapseButton
-          },
-          index,
-          rowCount: rows.length,
-          children: fieldContent
+  const {
+    add: AddBtn,
+    remove: RemoveBtn,
+    moveUp: MoveUpBtn,
+    moveDown: MoveDownBtn,
+    duplicate: DuplicateBtn,
+    collapse: CollapseBtn
+  } = layout.arrayButtons;
+  const ArrayFieldLayout = layout.arrayFieldLayout;
+  const RowLayout = layout.arrayRowLayout;
+  const renderedRows = rows.map((row, index) => {
+    const isCollapsed = showCollapse && collapsed.has(index);
+    const collapseButton = showCollapse ? /* @__PURE__ */ jsxRuntime.jsxs(
+      CollapseBtn,
+      {
+        type: "button",
+        className: classNames.arrayCollapse,
+        onClick: () => toggleCollapse(index),
+        "aria-label": isCollapsed ? `Expand item ${index + 1}` : `Collapse item ${index + 1}`,
+        isCollapsed,
+        children: [
+          isCollapsed ? labels.arrayExpand ?? "\u25BC" : labels.arrayCollapse ?? "\u25B6",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CollapseSummary,
+            {
+              control,
+              effectiveName,
+              index,
+              itemConfig,
+              isCollapsed
+            }
+          )
+        ]
+      }
+    ) : null;
+    const moveUpButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+      MoveUpBtn,
+      {
+        type: "button",
+        className: classNames.arrayMove,
+        onClick: () => move(index, index - 1),
+        disabled: index === 0,
+        "aria-label": `Move item ${index + 1} up`,
+        children: labels.arrayMoveUp ?? "\u2191"
+      }
+    ) : null;
+    const moveDownButton = showMove && rows.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+      MoveDownBtn,
+      {
+        type: "button",
+        className: classNames.arrayMove,
+        onClick: () => move(index, index + 1),
+        disabled: index === rows.length - 1,
+        "aria-label": `Move item ${index + 1} down`,
+        children: labels.arrayMoveDown ?? "\u2193"
+      }
+    ) : null;
+    const duplicateButton = showDuplicate && !atMax ? /* @__PURE__ */ jsxRuntime.jsx(
+      DuplicateBtn,
+      {
+        type: "button",
+        className: classNames.arrayDuplicate,
+        onClick: () => {
+          const values = Object.fromEntries(
+            Object.entries(row).filter(([k]) => k !== "id")
+          );
+          insert(index + 1, values);
         },
-        row.id
-      );
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+        "aria-label": `Duplicate item ${index + 1}`,
+        children: labels.arrayDuplicate ?? "Duplicate"
+      }
+    ) : null;
+    const removeButton = /* @__PURE__ */ jsxRuntime.jsx(
+      RemoveBtn,
       {
         type: "button",
-        className: classNames.arrayAdd,
-        disabled: atMax,
-        onClick: () => append(getDefaultValue(itemConfig)),
-        children: labels.arrayAdd ?? "Add"
+        className: classNames.arrayRemove,
+        onClick: () => remove(index),
+        disabled: atMin,
+        "aria-label": `Remove item ${index + 1}`,
+        children: labels.arrayRemove ?? "Remove"
       }
-    )
-  ] });
+    );
+    const fieldContent = !isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+      FieldRenderer,
+      {
+        field: effectiveItemConfig,
+        control,
+        namePrefix: `${effectiveName}.${index}`
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RowLayout,
+      {
+        buttons: {
+          moveUp: moveUpButton,
+          moveDown: moveDownButton,
+          duplicate: duplicateButton,
+          remove: removeButton,
+          collapse: collapseButton
+        },
+        index,
+        rowCount: rows.length,
+        children: fieldContent
+      },
+      row.id
+    );
+  });
+  const addButton = /* @__PURE__ */ jsxRuntime.jsx(
+    AddBtn,
+    {
+      type: "button",
+      className: classNames.arrayAdd,
+      disabled: atMax,
+      onClick: () => append(getDefaultValue(itemConfig)),
+      children: labels.arrayAdd ?? "Add"
+    }
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    ArrayFieldLayout,
+    {
+      rows: renderedRows,
+      addButton,
+      rowCount: rows.length,
+      canAdd: !atMax
+    }
+  );
   if (field.meta.section) {
     return content;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
-    field.label && /* @__PURE__ */ jsxRuntime.jsx("legend", { children: field.label }),
-    content
-  ] });
+  const ArrayWrapper = field.meta.wrapper ?? layout.arrayWrapper;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ArrayWrapper,
+    {
+      label: field.label,
+      className: classNames.arrayFieldset,
+      labelClassName: classNames.arrayLegend,
+      children: content
+    }
+  );
 }
 function CollapseSummary({
   control,
@@ -1406,11 +1476,7 @@ function AutoForm(props) {
       onSubmitRef
     ]
   );
-  React3__namespace.useImperativeHandle(
-    ref,
-    () => ({ ...formMethods, isSubmitting: formState.isSubmitting }),
-    [formMethods, formState.isSubmitting]
-  );
+  React3__namespace.useImperativeHandle(ref, () => formMethods, [formMethods]);
   const setFieldMeta = React3__namespace.useCallback(
     (field, meta) => {
       if (Object.keys(meta).length) {
@@ -1451,22 +1517,39 @@ function AutoForm(props) {
   }, [onValuesChangeRef, allValues]);
   const visibleFields = useConditionalFields(fieldsWithDynamic, control);
   const sections = useSectionGrouping(visibleFields);
-  const resolvedLayout = React3__namespace.useMemo(
-    () => ({
+  const resolvedLayout = React3__namespace.useMemo(() => {
+    const base = layout?.arrayButtons?.base ?? DefaultArrayButton;
+    const slots = layout?.arrayButtons;
+    return {
       formWrapper: layout?.formWrapper ?? DefaultFormWrapper,
       sectionWrapper: layout?.sectionWrapper ?? DefaultSectionWrapper,
       submitButton: 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
+      },
       loadingFallback: layout?.loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading\u2026" })
-    }),
-    [
-      layout?.formWrapper,
-      layout?.sectionWrapper,
-      layout?.submitButton,
-      layout?.arrayRowLayout,
-      layout?.loadingFallback
-    ]
-  );
+    };
+  }, [
+    layout?.formWrapper,
+    layout?.sectionWrapper,
+    layout?.submitButton,
+    layout?.arrayRowLayout,
+    layout?.arrayFieldLayout,
+    layout?.objectWrapper,
+    layout?.arrayWrapper,
+    layout?.arrayButtons,
+    layout?.loadingFallback
+  ]);
   const resolvedFieldWrapper = fieldWrapper ?? DefaultFieldWrapper;
   const FormWrapper = resolvedLayout.formWrapper;
   const SectionWrapper = resolvedLayout.sectionWrapper;
@@ -1645,9 +1728,15 @@ function createForm(schema) {
 }
 
 exports.AutoForm = AutoForm;
+exports.DefaultArrayButton = DefaultArrayButton;
+exports.DefaultArrayCollapseButton = DefaultArrayCollapseButton;
+exports.DefaultArrayFieldLayout = DefaultArrayFieldLayout;
+exports.DefaultArrayRowLayout = DefaultArrayRowLayout;
+exports.DefaultArrayWrapper = DefaultArrayWrapper;
 exports.DefaultCheckbox = DefaultCheckbox;
 exports.DefaultFieldWrapper = DefaultFieldWrapper;
 exports.DefaultInput = DefaultInput;
+exports.DefaultObjectWrapper = DefaultObjectWrapper;
 exports.DefaultSelect = DefaultSelect;
 exports.DefaultSubmitButton = DefaultSubmitButton;
 exports.FieldRenderer = FieldRenderer;