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

package/build/index.mjs

@@ -1,5 +1,5 @@
 // src/Form.tsx
-import React18, { useCallback, useEffect, useState } from "react";
+import React2, { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { ErrorNotification, Level } from "@scm-manager/ui-components";
 
@@ -18,73 +18,179 @@ function useScmFormContext() {
 // src/Form.tsx
 import { useTranslation } from "react-i18next";
 import { Button } from "@scm-manager/ui-buttons";
+var SuccessNotification = ({ label, hide }) => {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: "notification is-success"
+  }, /* @__PURE__ */ React2.createElement("button", {
+    className: "delete",
+    onClick: hide
+  }), label);
+};
+function Form({
+  children,
+  onSubmit,
+  defaultValues,
+  translationPath,
+  readOnly,
+  submitButtonTestId
+}) {
+  const form = useForm({
+    mode: "onChange",
+    defaultValues
+  });
+  const { formState, handleSubmit, reset } = form;
+  const [ns, prefix] = translationPath;
+  const { t } = useTranslation(ns, { keyPrefix: prefix });
+  const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
+  const translateWithFallback = 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] = useState();
+  const [showSuccessNotification, setShowSuccessNotification] = useState(false);
+  const submitButtonLabel = t("submit", { defaultValue: defaultTranslate("submit") });
+  const successNotification = translateWithFallback("submit-success-notification", {
+    defaultValue: defaultTranslate("submit-success-notification")
+  });
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      setShowSuccessNotification(true);
+    }
+  }, [isSubmitSuccessful]);
+  useEffect(() => reset(defaultValues), [defaultValues, reset]);
+  useEffect(() => {
+    if (isDirty) {
+      setShowSuccessNotification(false);
+    }
+  }, [isDirty]);
+  const submit = useCallback(
+    async (data) => {
+      setError(null);
+      try {
+        return await onSubmit(data);
+      } catch (e) {
+        if (e instanceof Error) {
+          setError(e);
+        } else {
+          throw e;
+        }
+      }
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ React2.createElement(ScmFormContextProvider, {
+    ...form,
+    readOnly: isSubmitting || readOnly,
+    t: translateWithFallback,
+    formId: prefix
+  }, /* @__PURE__ */ React2.createElement("form", {
+    onSubmit: handleSubmit(submit),
+    id: prefix
+  }), showSuccessNotification ? /* @__PURE__ */ React2.createElement(SuccessNotification, {
+    label: successNotification,
+    hide: () => setShowSuccessNotification(false)
+  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ React2.createElement(ErrorNotification, {
+    error
+  }) : null, !readOnly ? /* @__PURE__ */ React2.createElement(Level, {
+    right: /* @__PURE__ */ React2.createElement(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
-import React2 from "react";
+import React3 from "react";
 import classNames from "classnames";
-var FormRow = React2.forwardRef(
-  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ React2.createElement("div", {
+import styled from "styled-components";
+var FormRowDiv = styled.div`
+  .field {
+    margin-left: 0;
+  }
+
+  gap: 1rem;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+var FormRow = React3.forwardRef(
+  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ React3.createElement(FormRowDiv, {
     ref,
-    className: classNames("columns", className),
+    className: classNames("is-flex is-flex-wrap-wrap", className),
     ...rest
   }, children)
 );
 var FormRow_default = FormRow;
 
 // src/input/ControlledInputField.tsx
-import React10 from "react";
+import React12 from "react";
 import { Controller } from "react-hook-form";
-import classNames8 from "classnames";
 
 // src/input/InputField.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/base/Field.tsx
-import React3 from "react";
+import React4 from "react";
 import classNames2 from "classnames";
-var Field = ({ className, children, ...rest }) => /* @__PURE__ */ React3.createElement("div", {
+var Field = ({ className, children, ...rest }) => /* @__PURE__ */ React4.createElement("div", {
   className: classNames2("field", className),
   ...rest
 }, children);
 var Field_default = Field;
 
 // src/base/Control.tsx
-import React4 from "react";
+import React5 from "react";
 import classNames3 from "classnames";
-var Control = ({ className, children, ...rest }) => /* @__PURE__ */ React4.createElement("div", {
+var Control = ({ className, children, ...rest }) => /* @__PURE__ */ React5.createElement("div", {
   className: classNames3("control", className),
   ...rest
 }, children);
 var Control_default = Control;
 
 // src/base/label/Label.tsx
-import React5 from "react";
+import React6 from "react";
 import classNames4 from "classnames";
-var Label = ({ className, children, ...rest }) => /* @__PURE__ */ React5.createElement("label", {
+var Label = ({ className, children, ...rest }) => /* @__PURE__ */ React6.createElement("label", {
   className: classNames4("label", className),
   ...rest
 }, children);
 var Label_default = Label;
 
 // src/base/field-message/FieldMessage.tsx
-import React6 from "react";
+import React7 from "react";
 import classNames5 from "classnames";
 
 // src/variants.ts
 var createVariantClass = (variant) => variant ? `is-${variant}` : void 0;
 
 // src/base/field-message/FieldMessage.tsx
-var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ React6.createElement("p", {
+var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ React7.createElement("p", {
   className: classNames5("help", createVariantClass(variant), className)
 }, children);
 var FieldMessage_default = FieldMessage;
 
 // src/input/Input.tsx
-import React7 from "react";
+import React8 from "react";
 import classNames6 from "classnames";
 import { createAttributesForTesting } from "@scm-manager/ui-components";
-var Input = React7.forwardRef(({ variant, className, testId, ...props }, ref) => {
-  return /* @__PURE__ */ React7.createElement("input", {
+var Input = React8.forwardRef(({ variant, className, testId, ...props }, ref) => {
+  return /* @__PURE__ */ React8.createElement("input", {
     ref,
     className: classNames6("input", createVariantClass(variant), className),
     ...props,
@@ -94,85 +200,110 @@ var Input = React7.forwardRef(({ variant, className, testId, ...props }, ref) =>
 var Input_default = Input;
 
 // src/base/help/Help.tsx
-import React8 from "react";
-import classNames7 from "classnames";
-var Help = ({ text, className }) => /* @__PURE__ */ React8.createElement("span", {
-  className: classNames7("fas fa-fw fa-question-circle has-text-blue-light", className),
-  title: text
-});
+import React9 from "react";
+import { Tooltip } from "@scm-manager/ui-overlays";
+var Help = ({ text, className }) => /* @__PURE__ */ React9.createElement(Tooltip, {
+  className,
+  message: text
+}, /* @__PURE__ */ React9.createElement("i", {
+  className: "fas fa-fw fa-question-circle has-text-blue-light"
+}));
 var Help_default = Help;
 
 // src/input/InputField.tsx
-var InputField = React9.forwardRef(
+var InputField = React10.forwardRef(
   ({ label, helpText, error, className, ...props }, ref) => {
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ React9.createElement(Field_default, {
+    return /* @__PURE__ */ React10.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ React9.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React9.createElement(Help_default, {
+    }, /* @__PURE__ */ React10.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React10.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ React9.createElement(Control_default, null, /* @__PURE__ */ React9.createElement(Input_default, {
+    }) : null), /* @__PURE__ */ React10.createElement(Control_default, null, /* @__PURE__ */ React10.createElement(Input_default, {
       variant,
       ref,
       ...props
-    })), error ? /* @__PURE__ */ React9.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ React10.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
 );
 var InputField_default = InputField;
 
+// src/FormPathContext.tsx
+import React11, { useContext as useContext2, useMemo } from "react";
+var ScmFormPathContext = React11.createContext("");
+function useScmFormPathContext() {
+  return useContext2(ScmFormPathContext);
+}
+var ScmFormPathContextProvider = ({ children, path }) => /* @__PURE__ */ React11.createElement(ScmFormPathContext.Provider, {
+  value: path
+}, children);
+var ScmNestedFormPathContextProvider = ({ children, path }) => {
+  const prefix = useScmFormPathContext();
+  const pathWithPrefix = useMemo(() => prefix ? `${prefix}.${path}` : path, [path, prefix]);
+  return /* @__PURE__ */ React11.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__ */ React10.createElement(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__ */ React12.createElement(Controller, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement(InputField_default, {
-      className: classNames8("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ React12.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
-import React13 from "react";
+import React15 from "react";
 import { Controller as Controller2 } from "react-hook-form";
-import classNames9 from "classnames";
 
 // src/checkbox/CheckboxField.tsx
-import React12 from "react";
+import React14 from "react";
 
 // src/checkbox/Checkbox.tsx
-import React11 from "react";
+import React13 from "react";
 import { createAttributesForTesting as createAttributesForTesting2 } from "@scm-manager/ui-components";
-var Checkbox = React11.forwardRef(
-  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ React11.createElement("label", {
+var Checkbox = React13.forwardRef(
+  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ React13.createElement("label", {
     className: "checkbox",
     disabled: readOnly || props.disabled
-  }, readOnly ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("input", {
+  }, readOnly ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("input", {
     type: "hidden",
     name,
     value,
@@ -180,7 +311,7 @@ var Checkbox = React11.forwardRef(
     checked,
     defaultChecked,
     readOnly: true
-  }), /* @__PURE__ */ React11.createElement("input", {
+  }), /* @__PURE__ */ React13.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -191,7 +322,7 @@ var Checkbox = React11.forwardRef(
     ...props,
     ...createAttributesForTesting2(testId),
     disabled: true
-  })) : /* @__PURE__ */ React11.createElement("input", {
+  })) : /* @__PURE__ */ React13.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -202,7 +333,7 @@ var Checkbox = React11.forwardRef(
     defaultChecked,
     ...props,
     ...createAttributesForTesting2(testId)
-  }), label, helpText ? /* @__PURE__ */ React11.createElement(Help_default, {
+  }), label, helpText ? /* @__PURE__ */ React13.createElement(Help_default, {
     className: "ml-1",
     text: helpText
   }) : null)
@@ -210,9 +341,9 @@ var Checkbox = React11.forwardRef(
 var Checkbox_default = Checkbox;
 
 // src/checkbox/CheckboxField.tsx
-var CheckboxField = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(Field_default, {
+var CheckboxField = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(Field_default, {
   className
-}, /* @__PURE__ */ React12.createElement(Control_default, null, /* @__PURE__ */ React12.createElement(Checkbox_default, {
+}, /* @__PURE__ */ React14.createElement(Control_default, null, /* @__PURE__ */ React14.createElement(Checkbox_default, {
   ref,
   ...props
 }))));
@@ -224,38 +355,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__ */ React13.createElement(Controller2, {
+  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__ */ React15.createElement(Controller2, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue: defaultChecked,
-    render: ({ field }) => /* @__PURE__ */ React13.createElement(CheckboxField_default, {
-      className: classNames9("column", className),
+    render: ({ field }) => /* @__PURE__ */ React15.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
-import React14 from "react";
+import React16 from "react";
 import { Controller as Controller3 } from "react-hook-form";
-import classNames10 from "classnames";
 function ControlledSecretConfirmationField({
   name,
   label,
@@ -271,47 +403,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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Controller3, {
+  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__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Controller3, {
     control,
-    name,
+    name: nameWithPrefix,
     defaultValue,
     rules: {
       ...rules,
-      deps: [`${name}Confirmation`]
+      deps: [`${nameWithPrefix}Confirmation`]
     },
-    render: ({ field, fieldState }) => /* @__PURE__ */ React14.createElement(InputField_default, {
-      className: classNames10("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ React16.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__ */ React14.createElement(Controller3, {
+  }), /* @__PURE__ */ React16.createElement(Controller3, {
     control,
-    name: `${name}Confirmation`,
+    name: `${nameWithPrefix}Confirmation`,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ React14.createElement(InputField_default, {
-      className: classNames10("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ React16.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
@@ -320,40 +457,44 @@ function ControlledSecretConfirmationField({
 }
 
 // src/select/ControlledSelectField.tsx
-import React17 from "react";
+import React19 from "react";
 import { Controller as Controller4 } from "react-hook-form";
-import classNames12 from "classnames";
 
 // src/select/SelectField.tsx
-import React16 from "react";
+import React18 from "react";
 
 // src/select/Select.tsx
-import React15 from "react";
-import classNames11 from "classnames";
+import React17 from "react";
+import classNames7 from "classnames";
 import { createAttributesForTesting as createAttributesForTesting3 } from "@scm-manager/ui-components";
-var Select = React15.forwardRef(({ variant, children, className, testId, ...props }, ref) => /* @__PURE__ */ React15.createElement("div", {
-  className: classNames11("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
-}, /* @__PURE__ */ React15.createElement("select", {
-  ref,
-  ...props,
-  ...createAttributesForTesting3(testId)
-}, children)));
+var Select = React17.forwardRef(
+  ({ variant, children, className, options, testId, ...props }, ref) => /* @__PURE__ */ React17.createElement("div", {
+    className: classNames7("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
+  }, /* @__PURE__ */ React17.createElement("select", {
+    ref,
+    ...props,
+    ...createAttributesForTesting3(testId)
+  }, options ? options.map((option) => /* @__PURE__ */ React17.createElement("option", {
+    ...option,
+    key: option.value
+  }, option.label, option.children)) : children))
+);
 var Select_default = Select;
 
 // src/select/SelectField.tsx
-var SelectField = React16.forwardRef(
+var SelectField = React18.forwardRef(
   ({ label, helpText, error, className, ...props }, ref) => {
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ React16.createElement(Field_default, {
+    return /* @__PURE__ */ React18.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ React16.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React16.createElement(Help_default, {
+    }, /* @__PURE__ */ React18.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React18.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ React16.createElement(Control_default, null, /* @__PURE__ */ React16.createElement(Select_default, {
+    }) : null), /* @__PURE__ */ React18.createElement(Control_default, null, /* @__PURE__ */ React18.createElement(Select_default, {
       variant,
       ref,
       ...props
-    })), error ? /* @__PURE__ */ React16.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ React18.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
@@ -366,140 +507,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__ */ React17.createElement(Controller4, {
+  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__ */ React19.createElement(Controller4, {
     control,
-    name,
+    name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ React17.createElement(SelectField_default, {
-      className: classNames12("column", className),
+    render: ({ field, fieldState }) => /* @__PURE__ */ React19.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
+import React20, { useContext as useContext3, useMemo as useMemo2 } from "react";
+import { useFieldArray } from "react-hook-form";
+var ScmFormListContext = React20.createContext(null);
+var ScmFormListContextProvider = ({ name, children }) => {
+  const { control } = useScmFormContext();
+  const prefix = useScmFormPathContext();
+  const parentForm = useScmFormListContext();
+  const nameWithPrefix = useMemo2(() => prefix ? `${prefix}.${name}` : name, [name, prefix]);
+  const fieldArray = useFieldArray({
+    control,
+    name: nameWithPrefix
+  });
+  const value = useMemo2(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
+  return /* @__PURE__ */ React20.createElement(ScmFormPathContextProvider, {
+    path: nameWithPrefix
+  }, /* @__PURE__ */ React20.createElement(ScmFormListContext.Provider, {
+    value
+  }, children));
+};
+function useScmFormListContext() {
+  return useContext3(ScmFormListContext);
+}
+
+// src/list/ControlledList.tsx
+import React21 from "react";
+import { Button as Button2 } from "@scm-manager/ui-buttons";
+import { useTranslation as useTranslation2 } from "react-i18next";
+function ControlledList({
+  withDelete,
+  children
+}) {
+  const [defaultTranslate] = useTranslation2("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__ */ React21.createElement(React21.Fragment, null, fields.map((value, index) => /* @__PURE__ */ React21.createElement(ScmFormPathContextProvider, {
+    key: value.id,
+    path: `${nameWithPrefix}.${index}`
+  }, typeof children === "function" ? children({ value, index, remove: () => remove(index) }) : children, withDelete && !readOnly ? /* @__PURE__ */ React21.createElement("div", {
+    className: "level-right"
+  }, /* @__PURE__ */ React21.createElement(Button2, {
+    variant: "signal",
+    onClick: () => remove(index)
+  }, deleteButtonTranslation)) : null, /* @__PURE__ */ React21.createElement("hr", null))));
+}
+var ControlledList_default = ControlledList;
+
+// src/table/ControlledTable.tsx
+import React22 from "react";
+import { Button as Button3 } from "@scm-manager/ui-buttons";
+import classNames8 from "classnames";
+import { useTranslation as useTranslation3 } from "react-i18next";
+function ControlledTable({
+  withDelete,
+  children,
+  className
+}) {
+  const [defaultTranslate] = useTranslation3("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__ */ React18.createElement("div", {
-    className: "notification is-success"
-  }, /* @__PURE__ */ React18.createElement("button", {
-    className: "delete",
-    onClick: hide
-  }), label);
+  return /* @__PURE__ */ React22.createElement("table", {
+    className: classNames8("table content is-hoverable", className)
+  }, /* @__PURE__ */ React22.createElement("thead", null, /* @__PURE__ */ React22.createElement("tr", null, React22.Children.map(children, (child) => /* @__PURE__ */ React22.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ React22.createElement("th", {
+    className: "has-text-right"
+  }, actionHeaderLabel) : null)), /* @__PURE__ */ React22.createElement("tbody", null, fields.map((value, index) => /* @__PURE__ */ React22.createElement(ScmFormPathContextProvider, {
+    key: value.id,
+    path: `${nameWithPrefix}.${index}`
+  }, /* @__PURE__ */ React22.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ React22.createElement("td", {
+    className: "has-text-right"
+  }, /* @__PURE__ */ React22.createElement(Button3, {
+    className: "px-4",
+    onClick: () => remove(index),
+    "aria-label": deleteLabel
+  }, /* @__PURE__ */ React22.createElement("span", {
+    className: "icon is-small"
+  }, /* @__PURE__ */ React22.createElement("i", {
+    className: "fas fa-trash"
+  })))) : null)))));
+}
+var ControlledTable_default = ControlledTable;
+
+// src/table/ControlledColumn.tsx
+import React23, { useMemo as useMemo3 } from "react";
+import { useWatch } from "react-hook-form";
+var ControlledColumn = ({ name, children, ...props }) => {
+  const { control } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = useMemo3(() => formPathPrefix ? `${formPathPrefix}.${name}` : name, [formPathPrefix, name]);
+  const value = useWatch({ control, name: nameWithPrefix, disabled: typeof children === "function" });
+  const allValues = useWatch({ control, name: formPathPrefix, disabled: typeof children !== "function" });
+  return /* @__PURE__ */ React23.createElement("td", {
+    ...props
+  }, typeof children === "function" ? children(allValues) : value);
 };
-function Form({
+var ControlledColumn_default = ControlledColumn;
+
+// src/AddListEntryForm.tsx
+import React24, { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useForm as useForm2 } from "react-hook-form";
+import { Button as Button4 } from "@scm-manager/ui-buttons";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import styled2 from "styled-components";
+var StyledHr = styled2.hr`
+  &:last-child {
+    display: none;
+  }
+`;
+function AddListEntryForm({
   children,
-  onSubmit,
   defaultValues,
-  translationPath,
-  readOnly,
-  submitButtonTestId
+  submit,
+  disableSubmitWhenDirty = true
 }) {
-  const form = useForm({
+  const [defaultTranslate] = useTranslation4("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { append, isNested } = useScmFormListContext();
+  const form = useForm2({
     mode: "onChange",
     defaultValues
   });
-  const { formState, handleSubmit, reset } = form;
-  const [ns, prefix] = translationPath;
-  const { t } = useTranslation(ns, { keyPrefix: prefix });
-  const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
-  const [error, setError] = useState();
-  const [showSuccessNotification, setShowSuccessNotification] = useState(false);
-  useEffect(() => {
+  const {
+    reset,
+    formState: { isSubmitSuccessful, isDirty, isValid }
+  } = form;
+  const translateWithExtraPrefix = useCallback2(
+    (key, ...args) => t(`${prefixedNameWithoutIndices}.${key}`, ...args),
+    [prefixedNameWithoutIndices, t]
+  );
+  const onSubmit = useCallback2((data) => submit ? submit(data, append) : append(data), [append, submit]);
+  const submitButtonLabel = translateWithExtraPrefix("add", {
+    defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") })
+  });
+  useEffect2(() => {
     if (isSubmitSuccessful) {
-      setShowSuccessNotification(true);
-    }
-  }, [isSubmitSuccessful]);
-  useEffect(() => reset(defaultValues), [defaultValues, reset]);
-  useEffect(() => {
-    if (isDirty) {
-      setShowSuccessNotification(false);
+      reset(defaultValues);
     }
-  }, [isDirty]);
-  const translateWithFallback = useCallback(
-    (key, ...args) => {
-      const translation = t(key, ...args);
-      if (translation === `${prefix}.${key}`) {
-        return "";
-      }
-      return translation;
-    },
-    [prefix, t]
-  );
-  const submit = useCallback(
-    async (data) => {
-      setError(null);
-      try {
-        return await onSubmit(data);
-      } catch (e) {
-        if (e instanceof Error) {
-          setError(e);
-        } else {
-          throw e;
-        }
-      }
-    },
-    [onSubmit]
-  );
-  return /* @__PURE__ */ React18.createElement(ScmFormContextProvider, {
+  }, [defaultValues, isSubmitSuccessful, reset]);
+  if (readOnly) {
+    return null;
+  }
+  return /* @__PURE__ */ React24.createElement(ScmFormContextProvider, {
     ...form,
-    readOnly: isSubmitting || readOnly,
-    t: translateWithFallback
-  }, /* @__PURE__ */ React18.createElement("form", {
-    onSubmit: handleSubmit(submit)
-  }, showSuccessNotification ? /* @__PURE__ */ React18.createElement(SuccessNotification, {
-    label: translateWithFallback("submit-success-notification"),
-    hide: () => setShowSuccessNotification(false)
-  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ React18.createElement(ErrorNotification, {
-    error
-  }) : null, !readOnly ? /* @__PURE__ */ React18.createElement(Level, {
-    right: /* @__PURE__ */ React18.createElement(Button, {
-      type: "submit",
-      variant: "primary",
-      testId: submitButtonTestId ?? "submit-button",
-      disabled: !isDirty || !isValid,
-      isLoading: isSubmitting
-    }, t("submit"))
-  }) : null));
+    t: translateWithExtraPrefix,
+    formId: nameWithPrefix
+  }, /* @__PURE__ */ React24.createElement(ScmFormPathContextProvider, {
+    path: ""
+  }, /* @__PURE__ */ React24.createElement("form", {
+    id: nameWithPrefix,
+    onSubmit: form.handleSubmit(onSubmit)
+  }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ React24.createElement("div", {
+    className: "level-right"
+  }, /* @__PURE__ */ React24.createElement(Button4, {
+    form: nameWithPrefix,
+    type: "submit",
+    variant: isNested ? void 0 : "secondary",
+    disabled: disableSubmitWhenDirty && !isDirty || !isValid
+  }, submitButtonLabel)), /* @__PURE__ */ React24.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
 import { useConfigLink } from "@scm-manager/ui-api";
 import { Loading } from "@scm-manager/ui-components";
-import React19 from "react";
+import React25 from "react";
 function ConfigurationForm({ link, translationPath, children }) {
   const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink(link);
   if (isLoading || !initialConfiguration) {
-    return /* @__PURE__ */ React19.createElement(Loading, null);
+    return /* @__PURE__ */ React25.createElement(Loading, null);
   }
-  return /* @__PURE__ */ React19.createElement(Form_default, {
+  return /* @__PURE__ */ React25.createElement(Form_default, {
     onSubmit: update,
     translationPath,
     defaultValues: initialConfiguration,
@@ -593,9 +817,25 @@ 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
+  })
+});
 export {
   ConfigurationForm_default as ConfigurationForm,
-  Form_default as Form,
+  Form2 as Form,
   useCreateResource,
   useDeleteResource,
   useUpdateResource