@scm-manager/ui-forms 2.42.3 → 2.42.4-20230213-150253

package/build/index.js

@@ -27,7 +27,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ConfigurationForm: () => ConfigurationForm_default,
-  Form: () => Form_default,
+  Form: () => Form2,
   useCreateResource: () => useCreateResource,
   useDeleteResource: () => useDeleteResource,
   useUpdateResource: () => useUpdateResource
@@ -35,9 +35,9 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Form.tsx
-var import_react18 = __toESM(require("react"));
-var import_react_hook_form5 = require("react-hook-form");
-var import_ui_components4 = require("@scm-manager/ui-components");
+var import_react2 = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var import_ui_components = require("@scm-manager/ui-components");
 
 // src/ScmFormContext.tsx
 var import_react = __toESM(require("react"));
@@ -54,161 +54,292 @@ function useScmFormContext() {
 // src/Form.tsx
 var import_react_i18next = require("react-i18next");
 var import_ui_buttons = require("@scm-manager/ui-buttons");
+var SuccessNotification = ({ label, hide }) => {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: "notification is-success"
+  }, /* @__PURE__ */ import_react2.default.createElement("button", {
+    className: "delete",
+    onClick: hide
+  }), label);
+};
+function Form({
+  children,
+  onSubmit,
+  defaultValues,
+  translationPath,
+  readOnly,
+  submitButtonTestId
+}) {
+  const form = (0, import_react_hook_form.useForm)({
+    mode: "onChange",
+    defaultValues
+  });
+  const { formState, handleSubmit, reset } = form;
+  const [ns, prefix] = translationPath;
+  const { t } = (0, import_react_i18next.useTranslation)(ns, { keyPrefix: prefix });
+  const [defaultTranslate] = (0, import_react_i18next.useTranslation)("commons", { keyPrefix: "form" });
+  const translateWithFallback = (0, import_react2.useCallback)(
+    (key, ...args) => {
+      const translation = t(key, ...args);
+      if (translation === `${prefix}.${key}`) {
+        return "";
+      }
+      return translation;
+    },
+    [prefix, t]
+  );
+  const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
+  const [error, setError] = (0, import_react2.useState)();
+  const [showSuccessNotification, setShowSuccessNotification] = (0, import_react2.useState)(false);
+  const submitButtonLabel = t("submit", { defaultValue: defaultTranslate("submit") });
+  const successNotification = translateWithFallback("submit-success-notification", {
+    defaultValue: defaultTranslate("submit-success-notification")
+  });
+  (0, import_react2.useEffect)(() => {
+    if (isSubmitSuccessful) {
+      setShowSuccessNotification(true);
+    }
+  }, [isSubmitSuccessful]);
+  (0, import_react2.useEffect)(() => reset(defaultValues), [defaultValues, reset]);
+  (0, import_react2.useEffect)(() => {
+    if (isDirty) {
+      setShowSuccessNotification(false);
+    }
+  }, [isDirty]);
+  const submit = (0, import_react2.useCallback)(
+    async (data) => {
+      setError(null);
+      try {
+        return await onSubmit(data);
+      } catch (e) {
+        if (e instanceof Error) {
+          setError(e);
+        } else {
+          throw e;
+        }
+      }
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ import_react2.default.createElement(ScmFormContextProvider, {
+    ...form,
+    readOnly: isSubmitting || readOnly,
+    t: translateWithFallback,
+    formId: prefix
+  }, /* @__PURE__ */ import_react2.default.createElement("form", {
+    onSubmit: handleSubmit(submit),
+    id: prefix
+  }), showSuccessNotification ? /* @__PURE__ */ import_react2.default.createElement(SuccessNotification, {
+    label: successNotification,
+    hide: () => setShowSuccessNotification(false)
+  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ import_react2.default.createElement(import_ui_components.ErrorNotification, {
+    error
+  }) : null, !readOnly ? /* @__PURE__ */ import_react2.default.createElement(import_ui_components.Level, {
+    right: /* @__PURE__ */ import_react2.default.createElement(import_ui_buttons.Button, {
+      type: "submit",
+      variant: "primary",
+      testId: submitButtonTestId ?? "submit-button",
+      disabled: !isDirty || !isValid,
+      isLoading: isSubmitting,
+      form: prefix
+    }, submitButtonLabel)
+  }) : null);
+}
+var Form_default = Form;
 
 // src/FormRow.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var FormRow = import_react2.default.forwardRef(
-  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ import_react2.default.createElement("div", {
+var import_styled_components = __toESM(require("styled-components"));
+var FormRowDiv = import_styled_components.default.div`
+  .field {
+    margin-left: 0;
+  }
+
+  gap: 1rem;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+var FormRow = import_react3.default.forwardRef(
+  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ import_react3.default.createElement(FormRowDiv, {
     ref,
-    className: (0, import_classnames.default)("columns", className),
+    className: (0, import_classnames.default)("is-flex is-flex-wrap-wrap", className),
     ...rest
   }, children)
 );
 var FormRow_default = FormRow;
 
 // src/input/ControlledInputField.tsx
-var import_react10 = __toESM(require("react"));
-var import_react_hook_form = require("react-hook-form");
-var import_classnames8 = __toESM(require("classnames"));
+var import_react12 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
 
 // src/input/InputField.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/base/Field.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_classnames2 = __toESM(require("classnames"));
-var Field = ({ className, children, ...rest }) => /* @__PURE__ */ import_react3.default.createElement("div", {
+var Field = ({ className, children, ...rest }) => /* @__PURE__ */ import_react4.default.createElement("div", {
   className: (0, import_classnames2.default)("field", className),
   ...rest
 }, children);
 var Field_default = Field;
 
 // src/base/Control.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_classnames3 = __toESM(require("classnames"));
-var Control = ({ className, children, ...rest }) => /* @__PURE__ */ import_react4.default.createElement("div", {
+var Control = ({ className, children, ...rest }) => /* @__PURE__ */ import_react5.default.createElement("div", {
   className: (0, import_classnames3.default)("control", className),
   ...rest
 }, children);
 var Control_default = Control;
 
 // src/base/label/Label.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_classnames4 = __toESM(require("classnames"));
-var Label = ({ className, children, ...rest }) => /* @__PURE__ */ import_react5.default.createElement("label", {
+var Label = ({ className, children, ...rest }) => /* @__PURE__ */ import_react6.default.createElement("label", {
   className: (0, import_classnames4.default)("label", className),
   ...rest
 }, children);
 var Label_default = Label;
 
 // src/base/field-message/FieldMessage.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_classnames5 = __toESM(require("classnames"));
 
 // src/variants.ts
 var createVariantClass = (variant) => variant ? `is-${variant}` : void 0;
 
 // src/base/field-message/FieldMessage.tsx
-var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ import_react6.default.createElement("p", {
+var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ import_react7.default.createElement("p", {
   className: (0, import_classnames5.default)("help", createVariantClass(variant), className)
 }, children);
 var FieldMessage_default = FieldMessage;
 
 // src/input/Input.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_classnames6 = __toESM(require("classnames"));
-var import_ui_components = require("@scm-manager/ui-components");
-var Input = import_react7.default.forwardRef(({ variant, className, testId, ...props }, ref) => {
-  return /* @__PURE__ */ import_react7.default.createElement("input", {
+var import_ui_components2 = require("@scm-manager/ui-components");
+var Input = import_react8.default.forwardRef(({ variant, className, testId, ...props }, ref) => {
+  return /* @__PURE__ */ import_react8.default.createElement("input", {
     ref,
     className: (0, import_classnames6.default)("input", createVariantClass(variant), className),
     ...props,
-    ...(0, import_ui_components.createAttributesForTesting)(testId)
+    ...(0, import_ui_components2.createAttributesForTesting)(testId)
   });
 });
 var Input_default = Input;
 
 // src/base/help/Help.tsx
-var import_react8 = __toESM(require("react"));
-var import_classnames7 = __toESM(require("classnames"));
-var Help = ({ text, className }) => /* @__PURE__ */ import_react8.default.createElement("span", {
-  className: (0, import_classnames7.default)("fas fa-fw fa-question-circle has-text-blue-light", className),
-  title: text
-});
+var import_react9 = __toESM(require("react"));
+var import_ui_overlays = require("@scm-manager/ui-overlays");
+var Help = ({ text, className }) => /* @__PURE__ */ import_react9.default.createElement(import_ui_overlays.Tooltip, {
+  className,
+  message: text
+}, /* @__PURE__ */ import_react9.default.createElement("i", {
+  className: "fas fa-fw fa-question-circle has-text-blue-light"
+}));
 var Help_default = Help;
 
 // src/input/InputField.tsx
-var InputField = import_react9.default.forwardRef(
+var InputField = import_react10.default.forwardRef(
   ({ label, helpText, error, className, ...props }, ref) => {
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ import_react9.default.createElement(Field_default, {
+    return /* @__PURE__ */ import_react10.default.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ import_react9.default.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ import_react9.default.createElement(Help_default, {
+    }, /* @__PURE__ */ import_react10.default.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ import_react10.default.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ import_react9.default.createElement(Control_default, null, /* @__PURE__ */ import_react9.default.createElement(Input_default, {
+    }) : null), /* @__PURE__ */ import_react10.default.createElement(Control_default, null, /* @__PURE__ */ import_react10.default.createElement(Input_default, {
       variant,
       ref,
       ...props
-    })), error ? /* @__PURE__ */ import_react9.default.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ import_react10.default.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
 );
 var InputField_default = InputField;
 
+// src/FormPathContext.tsx
+var import_react11 = __toESM(require("react"));
+var ScmFormPathContext = import_react11.default.createContext("");
+function useScmFormPathContext() {
+  return (0, import_react11.useContext)(ScmFormPathContext);
+}
+var ScmFormPathContextProvider = ({ children, path }) => /* @__PURE__ */ import_react11.default.createElement(ScmFormPathContext.Provider, {
+  value: path
+}, children);
+var ScmNestedFormPathContextProvider = ({ children, path }) => {
+  const prefix = useScmFormPathContext();
+  const pathWithPrefix = (0, import_react11.useMemo)(() => prefix ? `${prefix}.${path}` : path, [path, prefix]);
+  return /* @__PURE__ */ import_react11.default.createElement(ScmFormPathContext.Provider, {
+    value: pathWithPrefix
+  }, children);
+};
+
+// src/helpers.ts
+function prefixWithoutIndices(path) {
+  return path.replace(/(\.\d+)/g, "");
+}
+
 // src/input/ControlledInputField.tsx
 function ControlledInputField({
   name,
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultValue,
   readOnly,
   ...props
 }) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_hook_form.Controller, {
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return /* @__PURE__ */ import_react12.default.createElement(import_react_hook_form2.Controller, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react10.default.createElement(InputField_default, {
-      className: (0, import_classnames8.default)("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react12.default.createElement(InputField_default, {
       readOnly: readOnly ?? formReadonly,
       required: rules == null ? void 0 : rules.required,
       ...props,
       ...field,
+      form: formId,
       label: labelTranslation,
       helpText: helpTextTranslation,
-      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
-      testId: testId ?? `input-${name}`
+      error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `input-${nameWithPrefix}`
     })
   });
 }
 var ControlledInputField_default = ControlledInputField;
 
 // src/checkbox/ControlledCheckboxField.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_hook_form2 = require("react-hook-form");
-var import_classnames9 = __toESM(require("classnames"));
+var import_react15 = __toESM(require("react"));
+var import_react_hook_form3 = require("react-hook-form");
 
 // src/checkbox/CheckboxField.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/checkbox/Checkbox.tsx
-var import_react11 = __toESM(require("react"));
-var import_ui_components2 = require("@scm-manager/ui-components");
-var Checkbox = import_react11.default.forwardRef(
-  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ import_react11.default.createElement("label", {
+var import_react13 = __toESM(require("react"));
+var import_ui_components3 = require("@scm-manager/ui-components");
+var Checkbox = import_react13.default.forwardRef(
+  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ import_react13.default.createElement("label", {
     className: "checkbox",
     disabled: readOnly || props.disabled
-  }, readOnly ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("input", {
+  }, readOnly ? /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("input", {
     type: "hidden",
     name,
     value,
@@ -216,7 +347,7 @@ var Checkbox = import_react11.default.forwardRef(
     checked,
     defaultChecked,
     readOnly: true
-  }), /* @__PURE__ */ import_react11.default.createElement("input", {
+  }), /* @__PURE__ */ import_react13.default.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -225,9 +356,9 @@ var Checkbox = import_react11.default.forwardRef(
     checked,
     defaultChecked,
     ...props,
-    ...(0, import_ui_components2.createAttributesForTesting)(testId),
+    ...(0, import_ui_components3.createAttributesForTesting)(testId),
     disabled: true
-  })) : /* @__PURE__ */ import_react11.default.createElement("input", {
+  })) : /* @__PURE__ */ import_react13.default.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -237,8 +368,8 @@ var Checkbox = import_react11.default.forwardRef(
     checked,
     defaultChecked,
     ...props,
-    ...(0, import_ui_components2.createAttributesForTesting)(testId)
-  }), label, helpText ? /* @__PURE__ */ import_react11.default.createElement(Help_default, {
+    ...(0, import_ui_components3.createAttributesForTesting)(testId)
+  }), label, helpText ? /* @__PURE__ */ import_react13.default.createElement(Help_default, {
     className: "ml-1",
     text: helpText
   }) : null)
@@ -246,9 +377,9 @@ var Checkbox = import_react11.default.forwardRef(
 var Checkbox_default = Checkbox;
 
 // src/checkbox/CheckboxField.tsx
-var CheckboxField = import_react12.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react12.default.createElement(Field_default, {
+var CheckboxField = import_react14.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react14.default.createElement(Field_default, {
   className
-}, /* @__PURE__ */ import_react12.default.createElement(Control_default, null, /* @__PURE__ */ import_react12.default.createElement(Checkbox_default, {
+}, /* @__PURE__ */ import_react14.default.createElement(Control_default, null, /* @__PURE__ */ import_react14.default.createElement(Checkbox_default, {
   ref,
   ...props
 }))));
@@ -260,38 +391,39 @@ function ControlledInputField2({
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultChecked,
   readOnly,
   ...props
 }) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
-  return /* @__PURE__ */ import_react13.default.createElement(import_react_hook_form2.Controller, {
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return /* @__PURE__ */ import_react15.default.createElement(import_react_hook_form3.Controller, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue: defaultChecked,
-    render: ({ field }) => /* @__PURE__ */ import_react13.default.createElement(CheckboxField_default, {
-      className: (0, import_classnames9.default)("column", className),
+    render: ({ field }) => /* @__PURE__ */ import_react15.default.createElement(CheckboxField_default, {
+      form: formId,
       readOnly: readOnly ?? formReadonly,
       defaultChecked: field.value,
       ...props,
       ...field,
       label: labelTranslation,
       helpText: helpTextTranslation,
-      testId: testId ?? `checkbox-${name}`
+      testId: testId ?? `checkbox-${nameWithPrefix}`
     })
   });
 }
 var ControlledCheckboxField_default = ControlledInputField2;
 
 // src/input/ControlledSecretConfirmationField.tsx
-var import_react14 = __toESM(require("react"));
-var import_react_hook_form3 = require("react-hook-form");
-var import_classnames10 = __toESM(require("classnames"));
+var import_react16 = __toESM(require("react"));
+var import_react_hook_form4 = require("react-hook-form");
 function ControlledSecretConfirmationField({
   name,
   label,
@@ -307,47 +439,52 @@ function ControlledSecretConfirmationField({
   readOnly,
   ...props
 }) {
-  const { control, watch, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
-  const confirmationLabelTranslation = confirmationLabel || t(`${name}.confirmation.label`) || "";
-  const confirmationHelpTextTranslation = confirmationHelpText || t(`${name}.confirmation.helpText`);
-  const confirmationErrorMessageTranslation = confirmationErrorMessage || t(`${name}.confirmation.errorMessage`);
-  const secretValue = watch(name);
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(import_react_hook_form3.Controller, {
+  const { control, watch, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  const confirmationLabelTranslation = confirmationLabel || t(`${prefixedNameWithoutIndices}.confirmation.label`) || "";
+  const confirmationHelpTextTranslation = confirmationHelpText || t(`${prefixedNameWithoutIndices}.confirmation.helpText`);
+  const confirmationErrorMessageTranslation = confirmationErrorMessage || t(`${prefixedNameWithoutIndices}.confirmation.errorMessage`);
+  const secretValue = watch(nameWithPrefix);
+  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form4.Controller, {
     control,
-    name,
+    name: nameWithPrefix,
     defaultValue,
     rules: {
       ...rules,
-      deps: [`${name}Confirmation`]
+      deps: [`${nameWithPrefix}Confirmation`]
     },
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react14.default.createElement(InputField_default, {
-      className: (0, import_classnames10.default)("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react16.default.createElement(InputField_default, {
+      className,
       readOnly: readOnly ?? formReadonly,
       ...props,
       ...field,
+      form: formId,
       required: rules == null ? void 0 : rules.required,
       type: "password",
       label: labelTranslation,
       helpText: helpTextTranslation,
-      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
-      testId: testId ?? `input-${name}`
+      error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `input-${nameWithPrefix}`
     })
-  }), /* @__PURE__ */ import_react14.default.createElement(import_react_hook_form3.Controller, {
+  }), /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form4.Controller, {
     control,
-    name: `${name}Confirmation`,
+    name: `${nameWithPrefix}Confirmation`,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react14.default.createElement(InputField_default, {
-      className: (0, import_classnames10.default)("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react16.default.createElement(InputField_default, {
+      className,
       type: "password",
       readOnly: readOnly ?? formReadonly,
       disabled: props.disabled,
       ...field,
+      form: formId,
       label: confirmationLabelTranslation,
       helpText: confirmationHelpTextTranslation,
-      error: fieldState.error ? fieldState.error.message || t(`${name}.confirmation.error.${fieldState.error.type}`) : void 0,
-      testId: confirmationTestId ?? `input-${name}-confirmation`
+      error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.confirmation.error.${fieldState.error.type}`) : void 0,
+      testId: confirmationTestId ?? `input-${nameWithPrefix}-confirmation`
     }),
     rules: {
       validate: (value) => secretValue === value || confirmationErrorMessageTranslation
@@ -356,40 +493,44 @@ function ControlledSecretConfirmationField({
 }
 
 // src/select/ControlledSelectField.tsx
-var import_react17 = __toESM(require("react"));
-var import_react_hook_form4 = require("react-hook-form");
-var import_classnames12 = __toESM(require("classnames"));
+var import_react19 = __toESM(require("react"));
+var import_react_hook_form5 = require("react-hook-form");
 
 // src/select/SelectField.tsx
-var import_react16 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/select/Select.tsx
-var import_react15 = __toESM(require("react"));
-var import_classnames11 = __toESM(require("classnames"));
-var import_ui_components3 = require("@scm-manager/ui-components");
-var Select = import_react15.default.forwardRef(({ variant, children, className, testId, ...props }, ref) => /* @__PURE__ */ import_react15.default.createElement("div", {
-  className: (0, import_classnames11.default)("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
-}, /* @__PURE__ */ import_react15.default.createElement("select", {
-  ref,
-  ...props,
-  ...(0, import_ui_components3.createAttributesForTesting)(testId)
-}, children)));
+var import_react17 = __toESM(require("react"));
+var import_classnames7 = __toESM(require("classnames"));
+var import_ui_components4 = require("@scm-manager/ui-components");
+var Select = import_react17.default.forwardRef(
+  ({ variant, children, className, options, testId, ...props }, ref) => /* @__PURE__ */ import_react17.default.createElement("div", {
+    className: (0, import_classnames7.default)("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
+  }, /* @__PURE__ */ import_react17.default.createElement("select", {
+    ref,
+    ...props,
+    ...(0, import_ui_components4.createAttributesForTesting)(testId)
+  }, options ? options.map((option) => /* @__PURE__ */ import_react17.default.createElement("option", {
+    ...option,
+    key: option.value
+  }, option.label, option.children)) : children))
+);
 var Select_default = Select;
 
 // src/select/SelectField.tsx
-var SelectField = import_react16.default.forwardRef(
+var SelectField = import_react18.default.forwardRef(
   ({ label, helpText, error, className, ...props }, ref) => {
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ import_react16.default.createElement(Field_default, {
+    return /* @__PURE__ */ import_react18.default.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ import_react16.default.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ import_react16.default.createElement(Help_default, {
+    }, /* @__PURE__ */ import_react18.default.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ import_react18.default.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ import_react16.default.createElement(Control_default, null, /* @__PURE__ */ import_react16.default.createElement(Select_default, {
+    }) : null), /* @__PURE__ */ import_react18.default.createElement(Control_default, null, /* @__PURE__ */ import_react18.default.createElement(Select_default, {
       variant,
       ref,
       ...props
-    })), error ? /* @__PURE__ */ import_react16.default.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ import_react18.default.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
@@ -402,140 +543,223 @@ function ControlledSelectField({
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultValue,
   readOnly,
   ...props
 }) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_hook_form4.Controller, {
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_hook_form5.Controller, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react17.default.createElement(SelectField_default, {
-      className: (0, import_classnames12.default)("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react19.default.createElement(SelectField_default, {
+      form: formId,
       readOnly: readOnly ?? formReadonly,
       required: rules == null ? void 0 : rules.required,
       ...props,
       ...field,
       label: labelTranslation,
       helpText: helpTextTranslation,
-      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
-      testId: testId ?? `select-${name}`
+      error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `select-${nameWithPrefix}`
     })
   });
 }
 var ControlledSelectField_default = ControlledSelectField;
 
-// src/Form.tsx
-var SuccessNotification = ({ label, hide }) => {
-  if (!label) {
+// src/ScmFormListContext.tsx
+var import_react20 = __toESM(require("react"));
+var import_react_hook_form6 = require("react-hook-form");
+var ScmFormListContext = import_react20.default.createContext(null);
+var ScmFormListContextProvider = ({ name, children }) => {
+  const { control } = useScmFormContext();
+  const prefix = useScmFormPathContext();
+  const parentForm = useScmFormListContext();
+  const nameWithPrefix = (0, import_react20.useMemo)(() => prefix ? `${prefix}.${name}` : name, [name, prefix]);
+  const fieldArray = (0, import_react_hook_form6.useFieldArray)({
+    control,
+    name: nameWithPrefix
+  });
+  const value = (0, import_react20.useMemo)(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
+  return /* @__PURE__ */ import_react20.default.createElement(ScmFormPathContextProvider, {
+    path: nameWithPrefix
+  }, /* @__PURE__ */ import_react20.default.createElement(ScmFormListContext.Provider, {
+    value
+  }, children));
+};
+function useScmFormListContext() {
+  return (0, import_react20.useContext)(ScmFormListContext);
+}
+
+// src/list/ControlledList.tsx
+var import_react21 = __toESM(require("react"));
+var import_ui_buttons2 = require("@scm-manager/ui-buttons");
+var import_react_i18next2 = require("react-i18next");
+function ControlledList({
+  withDelete,
+  children
+}) {
+  const [defaultTranslate] = (0, import_react_i18next2.useTranslation)("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { fields, remove } = useScmFormListContext();
+  const deleteButtonTranslation = t(`${prefixedNameWithoutIndices}.delete`, {
+    defaultValue: defaultTranslate("list.delete.label", {
+      entity: t(`${prefixedNameWithoutIndices}.entity`)
+    })
+  });
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, fields.map((value, index) => /* @__PURE__ */ import_react21.default.createElement(ScmFormPathContextProvider, {
+    key: value.id,
+    path: `${nameWithPrefix}.${index}`
+  }, typeof children === "function" ? children({ value, index, remove: () => remove(index) }) : children, withDelete && !readOnly ? /* @__PURE__ */ import_react21.default.createElement("div", {
+    className: "level-right"
+  }, /* @__PURE__ */ import_react21.default.createElement(import_ui_buttons2.Button, {
+    variant: "signal",
+    onClick: () => remove(index)
+  }, deleteButtonTranslation)) : null, /* @__PURE__ */ import_react21.default.createElement("hr", null))));
+}
+var ControlledList_default = ControlledList;
+
+// src/table/ControlledTable.tsx
+var import_react22 = __toESM(require("react"));
+var import_ui_buttons3 = require("@scm-manager/ui-buttons");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react_i18next3 = require("react-i18next");
+function ControlledTable({
+  withDelete,
+  children,
+  className
+}) {
+  const [defaultTranslate] = (0, import_react_i18next3.useTranslation)("commons", { keyPrefix: "form.table" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { fields, remove } = useScmFormListContext();
+  const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
+  const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
+  if (!fields.length) {
     return null;
   }
-  return /* @__PURE__ */ import_react18.default.createElement("div", {
-    className: "notification is-success"
-  }, /* @__PURE__ */ import_react18.default.createElement("button", {
-    className: "delete",
-    onClick: hide
-  }), label);
+  return /* @__PURE__ */ import_react22.default.createElement("table", {
+    className: (0, import_classnames8.default)("table content is-hoverable", className)
+  }, /* @__PURE__ */ import_react22.default.createElement("thead", null, /* @__PURE__ */ import_react22.default.createElement("tr", null, import_react22.default.Children.map(children, (child) => /* @__PURE__ */ import_react22.default.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ import_react22.default.createElement("th", {
+    className: "has-text-right"
+  }, actionHeaderLabel) : null)), /* @__PURE__ */ import_react22.default.createElement("tbody", null, fields.map((value, index) => /* @__PURE__ */ import_react22.default.createElement(ScmFormPathContextProvider, {
+    key: value.id,
+    path: `${nameWithPrefix}.${index}`
+  }, /* @__PURE__ */ import_react22.default.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ import_react22.default.createElement("td", {
+    className: "has-text-right"
+  }, /* @__PURE__ */ import_react22.default.createElement(import_ui_buttons3.Button, {
+    className: "px-4",
+    onClick: () => remove(index),
+    "aria-label": deleteLabel
+  }, /* @__PURE__ */ import_react22.default.createElement("span", {
+    className: "icon is-small"
+  }, /* @__PURE__ */ import_react22.default.createElement("i", {
+    className: "fas fa-trash"
+  })))) : null)))));
+}
+var ControlledTable_default = ControlledTable;
+
+// src/table/ControlledColumn.tsx
+var import_react23 = __toESM(require("react"));
+var import_react_hook_form7 = require("react-hook-form");
+var ControlledColumn = ({ name, children, ...props }) => {
+  const { control } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = (0, import_react23.useMemo)(() => formPathPrefix ? `${formPathPrefix}.${name}` : name, [formPathPrefix, name]);
+  const value = (0, import_react_hook_form7.useWatch)({ control, name: nameWithPrefix, disabled: typeof children === "function" });
+  const allValues = (0, import_react_hook_form7.useWatch)({ control, name: formPathPrefix, disabled: typeof children !== "function" });
+  return /* @__PURE__ */ import_react23.default.createElement("td", {
+    ...props
+  }, typeof children === "function" ? children(allValues) : value);
 };
-function Form({
+var ControlledColumn_default = ControlledColumn;
+
+// src/AddListEntryForm.tsx
+var import_react24 = __toESM(require("react"));
+var import_react_hook_form8 = require("react-hook-form");
+var import_ui_buttons4 = require("@scm-manager/ui-buttons");
+var import_react_i18next4 = require("react-i18next");
+var import_styled_components2 = __toESM(require("styled-components"));
+var StyledHr = import_styled_components2.default.hr`
+  &:last-child {
+    display: none;
+  }
+`;
+function AddListEntryForm({
   children,
-  onSubmit,
   defaultValues,
-  translationPath,
-  readOnly,
-  submitButtonTestId
+  submit,
+  disableSubmitWhenDirty = true
 }) {
-  const form = (0, import_react_hook_form5.useForm)({
+  const [defaultTranslate] = (0, import_react_i18next4.useTranslation)("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { append, isNested } = useScmFormListContext();
+  const form = (0, import_react_hook_form8.useForm)({
     mode: "onChange",
     defaultValues
   });
-  const { formState, handleSubmit, reset } = form;
-  const [ns, prefix] = translationPath;
-  const { t } = (0, import_react_i18next.useTranslation)(ns, { keyPrefix: prefix });
-  const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
-  const [error, setError] = (0, import_react18.useState)();
-  const [showSuccessNotification, setShowSuccessNotification] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const {
+    reset,
+    formState: { isSubmitSuccessful, isDirty, isValid }
+  } = form;
+  const translateWithExtraPrefix = (0, import_react24.useCallback)(
+    (key, ...args) => t(`${prefixedNameWithoutIndices}.${key}`, ...args),
+    [prefixedNameWithoutIndices, t]
+  );
+  const onSubmit = (0, import_react24.useCallback)((data) => submit ? submit(data, append) : append(data), [append, submit]);
+  const submitButtonLabel = translateWithExtraPrefix("add", {
+    defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") })
+  });
+  (0, import_react24.useEffect)(() => {
     if (isSubmitSuccessful) {
-      setShowSuccessNotification(true);
+      reset(defaultValues);
     }
-  }, [isSubmitSuccessful]);
-  (0, import_react18.useEffect)(() => reset(defaultValues), [defaultValues, reset]);
-  (0, import_react18.useEffect)(() => {
-    if (isDirty) {
-      setShowSuccessNotification(false);
-    }
-  }, [isDirty]);
-  const translateWithFallback = (0, import_react18.useCallback)(
-    (key, ...args) => {
-      const translation = t(key, ...args);
-      if (translation === `${prefix}.${key}`) {
-        return "";
-      }
-      return translation;
-    },
-    [prefix, t]
-  );
-  const submit = (0, import_react18.useCallback)(
-    async (data) => {
-      setError(null);
-      try {
-        return await onSubmit(data);
-      } catch (e) {
-        if (e instanceof Error) {
-          setError(e);
-        } else {
-          throw e;
-        }
-      }
-    },
-    [onSubmit]
-  );
-  return /* @__PURE__ */ import_react18.default.createElement(ScmFormContextProvider, {
+  }, [defaultValues, isSubmitSuccessful, reset]);
+  if (readOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react24.default.createElement(ScmFormContextProvider, {
     ...form,
-    readOnly: isSubmitting || readOnly,
-    t: translateWithFallback
-  }, /* @__PURE__ */ import_react18.default.createElement("form", {
-    onSubmit: handleSubmit(submit)
-  }, showSuccessNotification ? /* @__PURE__ */ import_react18.default.createElement(SuccessNotification, {
-    label: translateWithFallback("submit-success-notification"),
-    hide: () => setShowSuccessNotification(false)
-  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ import_react18.default.createElement(import_ui_components4.ErrorNotification, {
-    error
-  }) : null, !readOnly ? /* @__PURE__ */ import_react18.default.createElement(import_ui_components4.Level, {
-    right: /* @__PURE__ */ import_react18.default.createElement(import_ui_buttons.Button, {
-      type: "submit",
-      variant: "primary",
-      testId: submitButtonTestId ?? "submit-button",
-      disabled: !isDirty || !isValid,
-      isLoading: isSubmitting
-    }, t("submit"))
-  }) : null));
+    t: translateWithExtraPrefix,
+    formId: nameWithPrefix
+  }, /* @__PURE__ */ import_react24.default.createElement(ScmFormPathContextProvider, {
+    path: ""
+  }, /* @__PURE__ */ import_react24.default.createElement("form", {
+    id: nameWithPrefix,
+    onSubmit: form.handleSubmit(onSubmit)
+  }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ import_react24.default.createElement("div", {
+    className: "level-right"
+  }, /* @__PURE__ */ import_react24.default.createElement(import_ui_buttons4.Button, {
+    form: nameWithPrefix,
+    type: "submit",
+    variant: isNested ? void 0 : "secondary",
+    disabled: disableSubmitWhenDirty && !isDirty || !isValid
+  }, submitButtonLabel)), /* @__PURE__ */ import_react24.default.createElement(StyledHr, null)));
 }
-var Form_default = Object.assign(Form, {
-  Row: FormRow_default,
-  Input: ControlledInputField_default,
-  Checkbox: ControlledCheckboxField_default,
-  SecretConfirmation: ControlledSecretConfirmationField,
-  Select: ControlledSelectField_default
-});
+var AddListEntryForm_default = AddListEntryForm;
 
 // src/ConfigurationForm.tsx
 var import_ui_api = require("@scm-manager/ui-api");
 var import_ui_components5 = require("@scm-manager/ui-components");
-var import_react19 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 function ConfigurationForm({ link, translationPath, children }) {
   const { initialConfiguration, isReadOnly, update, isLoading } = (0, import_ui_api.useConfigLink)(link);
   if (isLoading || !initialConfiguration) {
-    return /* @__PURE__ */ import_react19.default.createElement(import_ui_components5.Loading, null);
+    return /* @__PURE__ */ import_react25.default.createElement(import_ui_components5.Loading, null);
   }
-  return /* @__PURE__ */ import_react19.default.createElement(Form_default, {
+  return /* @__PURE__ */ import_react25.default.createElement(Form_default, {
     onSubmit: update,
     translationPath,
     defaultValues: initialConfiguration,
@@ -629,6 +853,22 @@ var useDeleteResource = (idFactory, { collectionName: [entityQueryKey, collectio
     submissionResult: data
   };
 };
+
+// src/index.ts
+var Form2 = Object.assign(Form_default, {
+  Row: FormRow_default,
+  Input: ControlledInputField_default,
+  Checkbox: ControlledCheckboxField_default,
+  SecretConfirmation: ControlledSecretConfirmationField,
+  Select: ControlledSelectField_default,
+  PathContext: ScmNestedFormPathContextProvider,
+  ListContext: ScmFormListContextProvider,
+  List: ControlledList_default,
+  AddListEntryForm: AddListEntryForm_default,
+  Table: Object.assign(ControlledTable_default, {
+    Column: ControlledColumn_default
+  })
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ConfigurationForm,