@scm-manager/ui-forms 2.44.2 → 2.44.3-20230527-064447

package/build/index.js

@@ -27,6 +27,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ChipInputField: () => ChipInputField_default,
+  Combobox: () => Combobox_default,
+  ComboboxField: () => ComboboxField_default,
   ConfigurationForm: () => ConfigurationForm_default,
   Form: () => Form2,
   Select: () => Select_default,
@@ -38,7 +40,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Form.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_react_hook_form = require("react-hook-form");
 var import_ui_components = require("@scm-manager/ui-components");
 
@@ -60,6 +62,7 @@ var import_ui_buttons = require("@scm-manager/ui-buttons");
 var import_styled_components = __toESM(require("styled-components"));
 
 // src/helpers.ts
+var import_react2 = require("react");
 function prefixWithoutIndices(path) {
   return path.replace(/(\.\d+)/g, "");
 }
@@ -77,6 +80,21 @@ function setValues(newValues, setValue, path = "") {
     }
   }
 }
+function withForwardRef(component) {
+  return (0, import_react2.forwardRef)(component);
+}
+var defaultOptionFactory = (item) => typeof item === "object" && item !== null && "value" in item && typeof item["label"] === "string" ? item : { label: item, value: item };
+function mergeRefs(...refs) {
+  return (el) => refs.forEach((ref) => {
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(el);
+      } else {
+        ref.current = el;
+      }
+    }
+  });
+}
 
 // src/Form.tsx
 var ButtonsContainer = import_styled_components.default.div`
@@ -87,9 +105,9 @@ var SuccessNotification = ({ label, hide }) => {
   if (!label) {
     return null;
   }
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "notification is-success"
-  }, /* @__PURE__ */ import_react2.default.createElement("button", {
+  }, /* @__PURE__ */ import_react3.default.createElement("button", {
     className: "delete",
     onClick: hide
   }), label);
@@ -113,7 +131,7 @@ function 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)(
+  const translateWithFallback = (0, import_react3.useCallback)(
     (key, ...args) => {
       const translation = t(key, ...args);
       if (translation === `${prefix}.${key}`) {
@@ -124,31 +142,31 @@ function Form({
     [prefix, t]
   );
   const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
-  const [error, setError] = (0, import_react2.useState)();
-  const [showSuccessNotification, setShowSuccessNotification] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react3.useState)();
+  const [showSuccessNotification, setShowSuccessNotification] = (0, import_react3.useState)(false);
   const submitButtonLabel = t("submit", { defaultValue: defaultTranslate("submit") });
   const resetButtonLabel = t("reset", { defaultValue: defaultTranslate("reset") });
   const discardChangesButtonLabel = t("discardChanges", { defaultValue: defaultTranslate("discardChanges") });
   const successNotification = translateWithFallback("submit-success-notification", {
     defaultValue: successMessageFallback
   });
-  const overwriteValues = (0, import_react2.useCallback)(() => {
+  const overwriteValues = (0, import_react3.useCallback)(() => {
     if (withResetTo) {
       setValues(withResetTo, setValue);
     }
   }, [setValue, withResetTo]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isSubmitSuccessful) {
       setShowSuccessNotification(true);
     }
   }, [isSubmitSuccessful]);
-  (0, import_react2.useEffect)(() => reset(defaultValues), [defaultValues, reset]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => reset(defaultValues), [defaultValues, reset]);
+  (0, import_react3.useEffect)(() => {
     if (isDirty) {
       setShowSuccessNotification(false);
     }
   }, [isDirty]);
-  const submit = (0, import_react2.useCallback)(
+  const submit = (0, import_react3.useCallback)(
     async (data) => {
       setError(null);
       try {
@@ -163,34 +181,34 @@ function Form({
     },
     [onSubmit]
   );
-  return /* @__PURE__ */ import_react2.default.createElement(ScmFormContextProvider, {
+  return /* @__PURE__ */ import_react3.default.createElement(ScmFormContextProvider, {
     ...form,
     readOnly: isSubmitting || readOnly,
     t: translateWithFallback,
     formId: prefix
-  }, /* @__PURE__ */ import_react2.default.createElement("form", {
+  }, /* @__PURE__ */ import_react3.default.createElement("form", {
     onSubmit: handleSubmit(submit),
     onReset: () => reset(),
     id: prefix,
     noValidate: true
-  }), showSuccessNotification ? /* @__PURE__ */ import_react2.default.createElement(SuccessNotification, {
+  }), showSuccessNotification ? /* @__PURE__ */ import_react3.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, {
+  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ import_react3.default.createElement(import_ui_components.ErrorNotification, {
     error
-  }) : null, !readOnly ? /* @__PURE__ */ import_react2.default.createElement(import_ui_components.Level, {
-    right: /* @__PURE__ */ import_react2.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_buttons.Button, {
+  }) : null, !readOnly ? /* @__PURE__ */ import_react3.default.createElement(import_ui_components.Level, {
+    right: /* @__PURE__ */ import_react3.default.createElement(ButtonsContainer, null, /* @__PURE__ */ import_react3.default.createElement(import_ui_buttons.Button, {
       type: "submit",
       variant: "primary",
       testId: submitButtonTestId ?? "submit-button",
       disabled: !isDirty || !isValid,
       isLoading: isSubmitting,
       form: prefix
-    }, submitButtonLabel), withDiscardChanges ? /* @__PURE__ */ import_react2.default.createElement(import_ui_buttons.Button, {
+    }, submitButtonLabel), withDiscardChanges ? /* @__PURE__ */ import_react3.default.createElement(import_ui_buttons.Button, {
       type: "reset",
       form: prefix,
       testId: `${prefix}-discard-changes-button`
-    }, discardChangesButtonLabel) : null, withResetTo ? /* @__PURE__ */ import_react2.default.createElement(import_ui_buttons.Button, {
+    }, discardChangesButtonLabel) : null, withResetTo ? /* @__PURE__ */ import_react3.default.createElement(import_ui_buttons.Button, {
       form: prefix,
       onClick: overwriteValues,
       testId: `${prefix}-reset-button`
@@ -200,10 +218,10 @@ function Form({
 var Form_default = Form;
 
 // src/FormRow.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var FormRow = import_react3.default.forwardRef(
-  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ import_react3.default.createElement("div", {
+var FormRow = import_react4.default.forwardRef(
+  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ import_react4.default.createElement("div", {
     ref,
     className: (0, import_classnames.default)("columns", className),
     ...rest
@@ -212,58 +230,58 @@ var FormRow = import_react3.default.forwardRef(
 var FormRow_default = FormRow;
 
 // src/input/ControlledInputField.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_hook_form2 = require("react-hook-form");
 
 // src/input/InputField.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/base/Field.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_classnames2 = __toESM(require("classnames"));
-var Field = ({ className, children, ...rest }) => /* @__PURE__ */ import_react4.default.createElement("div", {
+var Field = ({ className, children, ...rest }) => /* @__PURE__ */ import_react5.default.createElement("div", {
   className: (0, import_classnames2.default)("field", className),
   ...rest
 }, children);
 var Field_default = Field;
 
 // src/base/Control.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_classnames3 = __toESM(require("classnames"));
-var Control = ({ className, children, ...rest }) => /* @__PURE__ */ import_react5.default.createElement("div", {
+var Control = ({ className, children, ...rest }) => /* @__PURE__ */ import_react6.default.createElement("div", {
   className: (0, import_classnames3.default)("control", className),
   ...rest
 }, children);
 var Control_default = Control;
 
 // src/base/label/Label.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_classnames4 = __toESM(require("classnames"));
-var Label = ({ className, children, ...rest }) => /* @__PURE__ */ import_react6.default.createElement("label", {
+var Label = ({ className, children, ...rest }) => /* @__PURE__ */ import_react7.default.createElement("label", {
   className: (0, import_classnames4.default)("label", className),
   ...rest
 }, children);
 var Label_default = Label;
 
 // src/base/field-message/FieldMessage.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __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_react7.default.createElement("p", {
+var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ import_react8.default.createElement("p", {
   className: (0, import_classnames5.default)("help", createVariantClass(variant), className)
 }, children);
 var FieldMessage_default = FieldMessage;
 
 // src/input/Input.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_classnames6 = __toESM(require("classnames"));
 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", {
+var Input = import_react9.default.forwardRef(({ variant, className, testId, ...props }, ref) => {
+  return /* @__PURE__ */ import_react9.default.createElement("input", {
     ref,
     className: (0, import_classnames6.default)("input", createVariantClass(variant), className),
     ...props,
@@ -273,12 +291,12 @@ var Input = import_react8.default.forwardRef(({ variant, className, testId, ...p
 var Input_default = Input;
 
 // src/base/help/Help.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __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, {
+var Help = ({ text, className }) => /* @__PURE__ */ import_react10.default.createElement(import_ui_overlays.Tooltip, {
   className,
   message: text
-}, /* @__PURE__ */ import_react9.default.createElement("i", {
+}, /* @__PURE__ */ import_react10.default.createElement("i", {
   className: "fas fa-fw fa-question-circle has-text-blue-light",
   "aria-hidden": true
 }));
@@ -286,23 +304,23 @@ var Help_default = Help;
 
 // src/input/InputField.tsx
 var import_ui_components3 = require("@scm-manager/ui-components");
-var InputField = import_react10.default.forwardRef(
+var InputField = import_react11.default.forwardRef(
   ({ label, helpText, error, className, id, ...props }, ref) => {
     const inputId = (0, import_ui_components3.useGeneratedId)(id ?? props.testId);
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ import_react10.default.createElement(Field_default, {
+    return /* @__PURE__ */ import_react11.default.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ import_react10.default.createElement(Label_default, {
+    }, /* @__PURE__ */ import_react11.default.createElement(Label_default, {
       htmlFor: inputId
-    }, label, helpText ? /* @__PURE__ */ import_react10.default.createElement(Help_default, {
+    }, label, helpText ? /* @__PURE__ */ import_react11.default.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ import_react10.default.createElement(Control_default, null, /* @__PURE__ */ import_react10.default.createElement(Input_default, {
+    }) : null), /* @__PURE__ */ import_react11.default.createElement(Control_default, null, /* @__PURE__ */ import_react11.default.createElement(Input_default, {
       variant,
       ref,
       id: inputId,
       ...props
-    })), error ? /* @__PURE__ */ import_react10.default.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ import_react11.default.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
@@ -310,18 +328,18 @@ var InputField = import_react10.default.forwardRef(
 var InputField_default = InputField;
 
 // src/FormPathContext.tsx
-var import_react11 = __toESM(require("react"));
-var ScmFormPathContext = import_react11.default.createContext("");
+var import_react12 = __toESM(require("react"));
+var ScmFormPathContext = import_react12.default.createContext("");
 function useScmFormPathContext() {
-  return (0, import_react11.useContext)(ScmFormPathContext);
+  return (0, import_react12.useContext)(ScmFormPathContext);
 }
-var ScmFormPathContextProvider = ({ children, path }) => /* @__PURE__ */ import_react11.default.createElement(ScmFormPathContext.Provider, {
+var ScmFormPathContextProvider = ({ children, path }) => /* @__PURE__ */ import_react12.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, {
+  const pathWithPrefix = (0, import_react12.useMemo)(() => prefix ? `${prefix}.${path}` : path, [path, prefix]);
+  return /* @__PURE__ */ import_react12.default.createElement(ScmFormPathContext.Provider, {
     value: pathWithPrefix
   }, children);
 };
@@ -345,12 +363,12 @@ function ControlledInputField({
   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, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_react_hook_form2.Controller, {
     control,
     name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react12.default.createElement(InputField_default, {
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react13.default.createElement(InputField_default, {
       readOnly: readOnly ?? formReadonly,
       required: rules == null ? void 0 : rules.required,
       className: (0, import_classnames7.default)("column", className),
@@ -367,20 +385,20 @@ function ControlledInputField({
 var ControlledInputField_default = ControlledInputField;
 
 // src/checkbox/ControlledCheckboxField.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
 
 // src/checkbox/CheckboxField.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/checkbox/Checkbox.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_ui_components4 = 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", {
+var Checkbox = import_react14.default.forwardRef(
+  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ import_react14.default.createElement("label", {
     className: "checkbox",
     disabled: readOnly || props.disabled
-  }, readOnly ? /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("input", {
+  }, readOnly ? /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("input", {
     type: "hidden",
     name,
     value,
@@ -388,7 +406,7 @@ var Checkbox = import_react13.default.forwardRef(
     checked,
     defaultChecked,
     readOnly: true
-  }), /* @__PURE__ */ import_react13.default.createElement("input", {
+  }), /* @__PURE__ */ import_react14.default.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -399,7 +417,7 @@ var Checkbox = import_react13.default.forwardRef(
     ...props,
     ...(0, import_ui_components4.createAttributesForTesting)(testId),
     disabled: true
-  })) : /* @__PURE__ */ import_react13.default.createElement("input", {
+  })) : /* @__PURE__ */ import_react14.default.createElement("input", {
     type: "checkbox",
     className: "mr-1",
     ref,
@@ -410,7 +428,7 @@ var Checkbox = import_react13.default.forwardRef(
     defaultChecked,
     ...props,
     ...(0, import_ui_components4.createAttributesForTesting)(testId)
-  }), label, helpText ? /* @__PURE__ */ import_react13.default.createElement(Help_default, {
+  }), label, helpText ? /* @__PURE__ */ import_react14.default.createElement(Help_default, {
     className: "ml-1",
     text: helpText
   }) : null)
@@ -418,9 +436,9 @@ var Checkbox = import_react13.default.forwardRef(
 var Checkbox_default = Checkbox;
 
 // src/checkbox/CheckboxField.tsx
-var CheckboxField = import_react14.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react14.default.createElement(Field_default, {
+var CheckboxField = import_react15.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react15.default.createElement(Field_default, {
   className
-}, /* @__PURE__ */ import_react14.default.createElement(Control_default, null, /* @__PURE__ */ import_react14.default.createElement(Checkbox_default, {
+}, /* @__PURE__ */ import_react15.default.createElement(Control_default, null, /* @__PURE__ */ import_react15.default.createElement(Checkbox_default, {
   ref,
   ...props
 }))));
@@ -445,12 +463,12 @@ function ControlledInputField2({
   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, {
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form3.Controller, {
     control,
     name: nameWithPrefix,
     rules,
     defaultValue: defaultChecked,
-    render: ({ field }) => /* @__PURE__ */ import_react15.default.createElement(CheckboxField_default, {
+    render: ({ field }) => /* @__PURE__ */ import_react16.default.createElement(CheckboxField_default, {
       form: formId,
       readOnly: readOnly ?? formReadonly,
       checked: field.value,
@@ -466,7 +484,7 @@ function ControlledInputField2({
 var ControlledCheckboxField_default = ControlledInputField2;
 
 // src/input/ControlledSecretConfirmationField.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_react_hook_form4 = require("react-hook-form");
 var import_classnames9 = __toESM(require("classnames"));
 function ControlledSecretConfirmationField({
@@ -494,17 +512,17 @@ function ControlledSecretConfirmationField({
   const confirmationHelpTextTranslation = confirmationHelpText || t(`${prefixedNameWithoutIndices}.confirmation.helpText`);
   const confirmationErrorMessageTranslation = confirmationErrorMessage || t(`${prefixedNameWithoutIndices}.confirmation.errorMessage`);
   const secretValue = watch(nameWithPrefix);
-  const validateConfirmField = (0, import_react16.useCallback)(
+  const validateConfirmField = (0, import_react17.useCallback)(
     (value) => secretValue === value || confirmationErrorMessageTranslation,
     [confirmationErrorMessageTranslation, secretValue]
   );
-  const confirmFieldRules = (0, import_react16.useMemo)(
+  const confirmFieldRules = (0, import_react17.useMemo)(
     () => ({
       validate: validateConfirmField
     }),
     [validateConfirmField]
   );
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form4.Controller, {
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_react_hook_form4.Controller, {
     control,
     name: nameWithPrefix,
     defaultValue,
@@ -512,7 +530,7 @@ function ControlledSecretConfirmationField({
       ...rules,
       deps: [`${nameWithPrefix}Confirmation`]
     },
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react16.default.createElement(InputField_default, {
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react17.default.createElement(InputField_default, {
       className: (0, import_classnames9.default)("column", className),
       readOnly: readOnly ?? formReadonly,
       ...props,
@@ -525,11 +543,11 @@ function ControlledSecretConfirmationField({
       error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
       testId: testId ?? `input-${nameWithPrefix}`
     })
-  }), /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form4.Controller, {
+  }), /* @__PURE__ */ import_react17.default.createElement(import_react_hook_form4.Controller, {
     control,
     name: `${nameWithPrefix}Confirmation`,
     defaultValue,
-    render: ({ field, fieldState: { error } }) => /* @__PURE__ */ import_react16.default.createElement(InputField_default, {
+    render: ({ field, fieldState: { error } }) => /* @__PURE__ */ import_react17.default.createElement(InputField_default, {
       className: (0, import_classnames9.default)("column", className),
       type: "password",
       readOnly: readOnly ?? formReadonly,
@@ -546,25 +564,25 @@ function ControlledSecretConfirmationField({
 }
 
 // src/select/ControlledSelectField.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_react_hook_form5 = require("react-hook-form");
 
 // src/select/SelectField.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/select/Select.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_classnames10 = __toESM(require("classnames"));
 var import_ui_components5 = require("@scm-manager/ui-components");
-var Select = import_react17.default.forwardRef(
-  ({ variant, children, className, options, testId, ...props }, ref) => /* @__PURE__ */ import_react17.default.createElement("div", {
+var Select = import_react18.default.forwardRef(
+  ({ variant, children, className, options, testId, ...props }, ref) => /* @__PURE__ */ import_react18.default.createElement("div", {
     className: (0, import_classnames10.default)("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
-  }, /* @__PURE__ */ import_react17.default.createElement("select", {
+  }, /* @__PURE__ */ import_react18.default.createElement("select", {
     ref,
     ...props,
     ...(0, import_ui_components5.createAttributesForTesting)(testId),
     className
-  }, options ? options.map((opt) => /* @__PURE__ */ import_react17.default.createElement("option", {
+  }, options ? options.map((opt) => /* @__PURE__ */ import_react18.default.createElement("option", {
     ...opt,
     key: opt.value
   }, opt.label, opt.children)) : children))
@@ -573,24 +591,24 @@ var Select_default = Select;
 
 // src/select/SelectField.tsx
 var import_ui_components6 = require("@scm-manager/ui-components");
-var SelectField = import_react18.default.forwardRef(
+var SelectField = import_react19.default.forwardRef(
   ({ label, helpText, error, className, id, ...props }, ref) => {
     const selectId = (0, import_ui_components6.useGeneratedId)(id ?? props.testId);
     const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ import_react18.default.createElement(Field_default, {
+    return /* @__PURE__ */ import_react19.default.createElement(Field_default, {
       className
-    }, /* @__PURE__ */ import_react18.default.createElement(Label_default, {
+    }, /* @__PURE__ */ import_react19.default.createElement(Label_default, {
       htmlFor: selectId
-    }, label, helpText ? /* @__PURE__ */ import_react18.default.createElement(Help_default, {
+    }, label, helpText ? /* @__PURE__ */ import_react19.default.createElement(Help_default, {
       className: "ml-1",
       text: helpText
-    }) : null), /* @__PURE__ */ import_react18.default.createElement(Control_default, null, /* @__PURE__ */ import_react18.default.createElement(Select_default, {
+    }) : null), /* @__PURE__ */ import_react19.default.createElement(Control_default, null, /* @__PURE__ */ import_react19.default.createElement(Select_default, {
       id: selectId,
       variant,
       ref,
       className: "is-full-width",
       ...props
-    })), error ? /* @__PURE__ */ import_react18.default.createElement(FieldMessage_default, {
+    })), error ? /* @__PURE__ */ import_react19.default.createElement(FieldMessage_default, {
       variant
     }, error) : null);
   }
@@ -616,12 +634,12 @@ function ControlledSelectField({
   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, {
+  return /* @__PURE__ */ import_react20.default.createElement(import_react_hook_form5.Controller, {
     control,
     name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react19.default.createElement(SelectField_default, {
+    render: ({ field, fieldState }) => /* @__PURE__ */ import_react20.default.createElement(SelectField_default, {
       form: formId,
       readOnly: readOnly ?? formReadonly,
       required: rules == null ? void 0 : rules.required,
@@ -638,93 +656,117 @@ function ControlledSelectField({
 var ControlledSelectField_default = ControlledSelectField;
 
 // src/chip-input/ControlledChipInputField.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_react_hook_form6 = require("react-hook-form");
 var import_classnames13 = __toESM(require("classnames"));
 
 // src/chip-input/ChipInputField.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_ui_components7 = require("@scm-manager/ui-components");
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_classnames12 = __toESM(require("classnames"));
 
 // src/headless-chip-input/ChipInput.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_react_slot = require("@radix-ui/react-slot");
-var ChipInputContext = (0, import_react20.createContext)(null);
-var ChipDelete = import_react20.default.forwardRef(({ asChild, index, ...props }, ref) => {
-  const { remove, disabled } = (0, import_react20.useContext)(ChipInputContext);
+var ChipInputContext = (0, import_react21.createContext)(null);
+function getChipInputContext() {
+  return ChipInputContext;
+}
+var DefaultNewChipInput = import_react21.default.forwardRef(
+  ({ onChange, value, ...props }, ref) => {
+    const handleKeyDown = (0, import_react21.useCallback)(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (e.currentTarget.value) {
+            onChange({ label: e.currentTarget.value, value: e.currentTarget.value });
+          }
+          return false;
+        }
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ import_react21.default.createElement("div", {
+      className: "is-flex-grow-1"
+    }, /* @__PURE__ */ import_react21.default.createElement("input", {
+      onKeyDown: handleKeyDown,
+      ...props,
+      ref
+    }));
+  }
+);
+var ChipDelete = import_react21.default.forwardRef(({ asChild, index, ...props }, ref) => {
+  const { remove, disabled } = (0, import_react21.useContext)(ChipInputContext);
   const Comp = asChild ? import_react_slot.Slot : "button";
   if (disabled) {
     return null;
   }
-  return /* @__PURE__ */ import_react20.default.createElement(Comp, {
+  return /* @__PURE__ */ import_react21.default.createElement(Comp, {
     ...props,
     ref,
     type: "button",
     onClick: () => remove(index)
   });
 });
-var NewChipInput = import_react20.default.forwardRef(({ asChild, ...props }, ref) => {
-  const { add, value, disabled, readOnly } = (0, import_react20.useContext)(ChipInputContext);
-  const handleKeyDown = (0, import_react20.useCallback)(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        const newValue = e.currentTarget.value.trim();
-        if (newValue && !(value == null ? void 0 : value.includes(newValue))) {
-          add(newValue);
-          e.currentTarget.value = "";
-        }
-        return false;
-      }
-    },
-    [add, value]
-  );
-  const Comp = asChild ? import_react_slot.Slot : "input";
-  return /* @__PURE__ */ import_react20.default.createElement(Comp, {
+var NewChipInput = withForwardRef(function NewChipInput2(props, ref) {
+  const { add, disabled, readOnly, inputRef } = (0, import_react21.useContext)(getChipInputContext());
+  const Comp = props.children ? import_react_slot.Slot : DefaultNewChipInput;
+  return import_react21.default.createElement(Comp, {
     ...props,
-    onKeyDown: handleKeyDown,
+    onChange: add,
     readOnly,
     disabled,
-    ref
+    value: null,
+    ref: mergeRefs(ref, inputRef)
   });
 });
-var Chip = import_react20.default.forwardRef(({ asChild, ...props }, ref) => {
+var Chip = import_react21.default.forwardRef(({ asChild, ...props }, ref) => {
   const Comp = asChild ? import_react_slot.Slot : "li";
-  return /* @__PURE__ */ import_react20.default.createElement(Comp, {
+  return /* @__PURE__ */ import_react21.default.createElement(Comp, {
     ...props,
     ref
   });
 });
-var ChipInput = import_react20.default.forwardRef(
-  ({ children, value = [], disabled, readOnly, onChange, ...props }, ref) => {
-    const isInactive = (0, import_react20.useMemo)(() => disabled || readOnly, [disabled, readOnly]);
-    const add = (0, import_react20.useCallback)(
-      (newValue) => !isInactive && onChange && onChange([...value, newValue]),
-      [isInactive, onChange, value]
-    );
-    const remove = (0, import_react20.useCallback)(
-      (index) => !isInactive && onChange && onChange(value == null ? void 0 : value.filter((_, itdx) => itdx !== index)),
-      [isInactive, onChange, value]
-    );
-    return /* @__PURE__ */ import_react20.default.createElement(ChipInputContext.Provider, {
-      value: (0, import_react20.useMemo)(
-        () => ({
-          value,
-          disabled,
-          readOnly,
-          add,
-          remove
-        }),
-        [add, disabled, readOnly, remove, value]
-      )
-    }, /* @__PURE__ */ import_react20.default.createElement("ul", {
-      ...props,
-      ref
-    }, children));
-  }
-);
+var ChipInput = withForwardRef(function ChipInput2({ children, value = [], disabled, readOnly, onChange, isNewItemDuplicate, ...props }, ref) {
+  const inputRef = (0, import_react21.useRef)(null);
+  const isInactive = (0, import_react21.useMemo)(() => disabled || readOnly, [disabled, readOnly]);
+  const add = (0, import_react21.useCallback)(
+    (newItem) => {
+      if (!isInactive && !(value == null ? void 0 : value.some(
+        (item) => isNewItemDuplicate ? isNewItemDuplicate(item, newItem) : item.label === newItem.label || item.value === newItem.value
+      ))) {
+        if (onChange) {
+          onChange([...value ?? [], newItem]);
+        }
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+      }
+    },
+    [isInactive, isNewItemDuplicate, onChange, value]
+  );
+  const remove = (0, import_react21.useCallback)(
+    (index) => !isInactive && onChange && onChange(value == null ? void 0 : value.filter((_, itdx) => itdx !== index)),
+    [isInactive, onChange, value]
+  );
+  const Context2 = getChipInputContext();
+  return /* @__PURE__ */ import_react21.default.createElement(Context2.Provider, {
+    value: (0, import_react21.useMemo)(
+      () => ({
+        disabled,
+        readOnly,
+        add,
+        remove,
+        inputRef
+      }),
+      [add, disabled, readOnly, remove]
+    )
+  }, /* @__PURE__ */ import_react21.default.createElement("ul", {
+    ...props,
+    ref
+  }, children));
+});
 var ChipInput_default = Object.assign(ChipInput, {
   Chip: Object.assign(Chip, {
     Delete: ChipDelete
@@ -746,78 +788,94 @@ var StyledChipInput = (0, import_styled_components2.default)(ChipInput_default)`
 var StyledInput = (0, import_styled_components2.default)(NewChipInput)`
   color: var(--scm-secondary-more-color);
   font-size: 1rem;
+  height: initial;
+  padding: 0;
+  border-radius: 0;
   &:focus {
     outline: none;
   }
 `;
-var ChipInputField = import_react21.default.forwardRef(
-  ({
-    label,
-    helpText,
-    readOnly,
-    disabled,
-    error,
-    createDeleteText,
-    onChange,
-    placeholder,
-    value,
-    className,
-    testId,
-    id,
-    ...props
-  }, ref) => {
-    const [t] = (0, import_react_i18next2.useTranslation)("commons", { keyPrefix: "form.chipList" });
-    const deleteTextCallback = (0, import_react21.useCallback)(
-      (item) => createDeleteText ? createDeleteText(item) : t("delete", { item }),
-      [createDeleteText, t]
-    );
-    const inputId = (0, import_ui_components7.useGeneratedId)(id ?? testId);
-    const labelId = (0, import_ui_components7.useGeneratedId)();
-    const inputDescriptionId = (0, import_ui_components7.useGeneratedId)();
-    const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ import_react21.default.createElement(Field_default, {
-      className,
-      "aria-owns": inputId
-    }, /* @__PURE__ */ import_react21.default.createElement(Label_default, {
-      id: labelId
-    }, label, helpText ? /* @__PURE__ */ import_react21.default.createElement(Help_default, {
-      className: "ml-1",
-      text: helpText
-    }) : null), /* @__PURE__ */ import_react21.default.createElement(StyledChipInput, {
-      value,
-      onChange,
-      className: "is-flex is-flex-wrap-wrap input",
-      "aria-labelledby": labelId,
-      disabled: readOnly || disabled
-    }, value == null ? void 0 : value.map((val, index) => /* @__PURE__ */ import_react21.default.createElement(ChipInput_default.Chip, {
-      key: `${val}-${index}`,
-      className: "tag is-light"
-    }, val, /* @__PURE__ */ import_react21.default.createElement(ChipInput_default.Chip.Delete, {
-      "aria-label": deleteTextCallback(val),
-      index,
-      className: "delete is-small"
-    }))), /* @__PURE__ */ import_react21.default.createElement(StyledInput, {
-      ...props,
-      className: (0, import_classnames12.default)(
-        "is-borderless",
-        "is-flex-grow-1",
-        "has-background-transparent",
-        createVariantClass(variant)
-      ),
-      placeholder: !readOnly && !disabled ? placeholder : "",
-      id: inputId,
-      ref,
-      "aria-describedby": inputDescriptionId,
-      ...(0, import_ui_components7.createAttributesForTesting)(testId)
-    })), /* @__PURE__ */ import_react21.default.createElement(import_react_visually_hidden.VisuallyHidden, {
-      "aria-hidden": true,
-      id: inputDescriptionId
-    }, t("input.description")), error ? /* @__PURE__ */ import_react21.default.createElement(FieldMessage_default, {
-      variant
-    }, error) : null);
+var StyledDelete = (0, import_styled_components2.default)(ChipInput_default.Chip.Delete)`
+  &:focus {
+    outline-offset: 0;
   }
-);
-var ChipInputField_default = ChipInputField;
+`;
+var ChipInputField = function ChipInputField2({
+  label,
+  helpText,
+  readOnly,
+  disabled,
+  error,
+  createDeleteText,
+  onChange,
+  placeholder,
+  value,
+  className,
+  testId,
+  id,
+  children,
+  isLoading,
+  isNewItemDuplicate,
+  ...props
+}, ref) {
+  const [t] = (0, import_react_i18next2.useTranslation)("commons", { keyPrefix: "form.chipList" });
+  const deleteTextCallback = (0, import_react22.useCallback)(
+    (item) => createDeleteText ? createDeleteText(item) : t("delete", { item }),
+    [createDeleteText, t]
+  );
+  const inputId = (0, import_ui_components7.useGeneratedId)(id ?? testId);
+  const labelId = (0, import_ui_components7.useGeneratedId)();
+  const inputDescriptionId = (0, import_ui_components7.useGeneratedId)();
+  const variant = error ? "danger" : void 0;
+  return /* @__PURE__ */ import_react22.default.createElement(Field_default, {
+    className,
+    "aria-owns": inputId
+  }, /* @__PURE__ */ import_react22.default.createElement(Label_default, {
+    id: labelId
+  }, label, helpText ? /* @__PURE__ */ import_react22.default.createElement(Help_default, {
+    className: "ml-1",
+    text: helpText
+  }) : null), /* @__PURE__ */ import_react22.default.createElement("div", {
+    className: (0, import_classnames12.default)("control", { "is-loading": isLoading })
+  }, /* @__PURE__ */ import_react22.default.createElement(StyledChipInput, {
+    value,
+    onChange: (e) => onChange && onChange(e ?? []),
+    className: "is-flex is-flex-wrap-wrap input",
+    "aria-labelledby": labelId,
+    disabled: readOnly || disabled,
+    isNewItemDuplicate
+  }, value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ import_react22.default.createElement(ChipInput_default.Chip, {
+    key: option.label,
+    className: "tag is-light is-overflow-hidden"
+  }, /* @__PURE__ */ import_react22.default.createElement("span", {
+    className: "is-ellipsis-overflow"
+  }, option.label), /* @__PURE__ */ import_react22.default.createElement(StyledDelete, {
+    "aria-label": deleteTextCallback(option.label),
+    index,
+    className: "delete is-small"
+  }))), /* @__PURE__ */ import_react22.default.createElement(StyledInput, {
+    ...props,
+    className: (0, import_classnames12.default)(
+      "is-borderless",
+      "has-background-transparent",
+      "is-shadowless",
+      "input",
+      "is-ellipsis-overflow",
+      createVariantClass(variant)
+    ),
+    placeholder: !readOnly && !disabled ? placeholder : "",
+    id: inputId,
+    ref,
+    "aria-describedby": inputDescriptionId,
+    ...(0, import_ui_components7.createAttributesForTesting)(testId)
+  }, children ? children : null))), /* @__PURE__ */ import_react22.default.createElement(import_react_visually_hidden.VisuallyHidden, {
+    "aria-hidden": true,
+    id: inputDescriptionId
+  }, t("input.description")), error ? /* @__PURE__ */ import_react22.default.createElement(FieldMessage_default, {
+    variant
+  }, error) : null);
+};
+var ChipInputField_default = withForwardRef(ChipInputField);
 
 // src/chip-input/ControlledChipInputField.tsx
 function ControlledChipInputField({
@@ -831,6 +889,8 @@ function ControlledChipInputField({
   placeholder,
   className,
   createDeleteText,
+  children,
+  optionFactory = defaultOptionFactory,
   ...props
 }) {
   const { control, t, readOnly: formReadonly } = useScmFormContext();
@@ -841,53 +901,55 @@ function ControlledChipInputField({
   const placeholderTranslation = placeholder || t(`${prefixedNameWithoutIndices}.placeholder`) || "";
   const ariaLabelTranslation = t(`${prefixedNameWithoutIndices}.ariaLabel`);
   const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
-  return /* @__PURE__ */ import_react22.default.createElement(import_react_hook_form6.Controller, {
+  return /* @__PURE__ */ import_react23.default.createElement(import_react_hook_form6.Controller, {
     control,
     name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ import_react22.default.createElement(ChipInputField_default, {
+    render: ({ field: { value, onChange, ...field }, fieldState }) => /* @__PURE__ */ import_react23.default.createElement(ChipInputField_default, {
       label: labelTranslation,
       helpText: helpTextTranslation,
       placeholder: placeholderTranslation,
       "aria-label": ariaLabelTranslation,
+      value: value ? value.map(optionFactory) : [],
+      onChange: (selectedOptions) => onChange(selectedOptions.map((item) => item.value)),
       ...props,
       ...field,
       readOnly: readOnly ?? formReadonly,
       className: (0, import_classnames13.default)("column", className),
       error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
       testId: testId ?? `input-${nameWithPrefix}`
-    })
+    }, children)
   });
 }
 var ControlledChipInputField_default = ControlledChipInputField;
 
 // src/ScmFormListContext.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_react_hook_form7 = require("react-hook-form");
-var ScmFormListContext = import_react23.default.createContext(null);
+var ScmFormListContext = import_react24.default.createContext(null);
 var ScmFormListContextProvider = ({ name, children }) => {
   const { control } = useScmFormContext();
   const prefix = useScmFormPathContext();
   const parentForm = useScmFormListContext();
-  const nameWithPrefix = (0, import_react23.useMemo)(() => prefix ? `${prefix}.${name}` : name, [name, prefix]);
+  const nameWithPrefix = (0, import_react24.useMemo)(() => prefix ? `${prefix}.${name}` : name, [name, prefix]);
   const fieldArray = (0, import_react_hook_form7.useFieldArray)({
     control,
     name: nameWithPrefix
   });
-  const value = (0, import_react23.useMemo)(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
-  return /* @__PURE__ */ import_react23.default.createElement(ScmFormPathContextProvider, {
+  const value = (0, import_react24.useMemo)(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
+  return /* @__PURE__ */ import_react24.default.createElement(ScmFormPathContextProvider, {
     path: nameWithPrefix
-  }, /* @__PURE__ */ import_react23.default.createElement(ScmFormListContext.Provider, {
+  }, /* @__PURE__ */ import_react24.default.createElement(ScmFormListContext.Provider, {
     value
   }, children));
 };
 function useScmFormListContext() {
-  return (0, import_react23.useContext)(ScmFormListContext);
+  return (0, import_react24.useContext)(ScmFormListContext);
 }
 
 // src/list/ControlledList.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_ui_buttons2 = require("@scm-manager/ui-buttons");
 var import_react_i18next3 = require("react-i18next");
 function ControlledList({
@@ -904,20 +966,20 @@ function ControlledList({
       entity: t(`${prefixedNameWithoutIndices}.entity`)
     })
   });
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, fields.map((value, index) => /* @__PURE__ */ import_react24.default.createElement(ScmFormPathContextProvider, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, fields.map((value, index) => /* @__PURE__ */ import_react25.default.createElement(ScmFormPathContextProvider, {
     key: value.id,
     path: `${nameWithPrefix}.${index}`
-  }, typeof children === "function" ? children({ value, index, remove: () => remove(index) }) : children, withDelete && !readOnly ? /* @__PURE__ */ import_react24.default.createElement("div", {
+  }, typeof children === "function" ? children({ value, index, remove: () => remove(index) }) : children, withDelete && !readOnly ? /* @__PURE__ */ import_react25.default.createElement("div", {
     className: "level-right"
-  }, /* @__PURE__ */ import_react24.default.createElement(import_ui_buttons2.Button, {
+  }, /* @__PURE__ */ import_react25.default.createElement(import_ui_buttons2.Button, {
     variant: "signal",
     onClick: () => remove(index)
-  }, deleteButtonTranslation)) : null, /* @__PURE__ */ import_react24.default.createElement("hr", null))));
+  }, deleteButtonTranslation)) : null, /* @__PURE__ */ import_react25.default.createElement("hr", null))));
 }
 var ControlledList_default = ControlledList;
 
 // src/table/ControlledTable.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_ui_buttons3 = require("@scm-manager/ui-buttons");
 var import_classnames14 = __toESM(require("classnames"));
 var import_react_i18next4 = require("react-i18next");
@@ -935,48 +997,48 @@ function ControlledTable({
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
   const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
-  return /* @__PURE__ */ import_react25.default.createElement("table", {
+  return /* @__PURE__ */ import_react26.default.createElement("table", {
     className: (0, import_classnames14.default)("table content is-hoverable", className)
-  }, /* @__PURE__ */ import_react25.default.createElement("thead", null, /* @__PURE__ */ import_react25.default.createElement("tr", null, import_react25.default.Children.map(children, (child) => /* @__PURE__ */ import_react25.default.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ import_react25.default.createElement("th", {
+  }, /* @__PURE__ */ import_react26.default.createElement("thead", null, /* @__PURE__ */ import_react26.default.createElement("tr", null, import_react26.default.Children.map(children, (child) => /* @__PURE__ */ import_react26.default.createElement("th", null, t(`${prefixedNameWithoutIndices}.${child.props.name}.label`))), withDelete && !readOnly ? /* @__PURE__ */ import_react26.default.createElement("th", {
     className: "has-text-right"
-  }, actionHeaderLabel) : null)), /* @__PURE__ */ import_react25.default.createElement("tbody", null, fields.length === 0 ? /* @__PURE__ */ import_react25.default.createElement("tr", null, /* @__PURE__ */ import_react25.default.createElement("td", {
+  }, actionHeaderLabel) : null)), /* @__PURE__ */ import_react26.default.createElement("tbody", null, fields.length === 0 ? /* @__PURE__ */ import_react26.default.createElement("tr", null, /* @__PURE__ */ import_react26.default.createElement("td", {
     colSpan: 1e3
-  }, /* @__PURE__ */ import_react25.default.createElement(import_ui_components8.Notification, {
+  }, /* @__PURE__ */ import_react26.default.createElement(import_ui_components8.Notification, {
     type: "info"
-  }, emptyTableLabel))) : null, fields.map((value, index) => /* @__PURE__ */ import_react25.default.createElement(ScmFormPathContextProvider, {
+  }, emptyTableLabel))) : null, fields.map((value, index) => /* @__PURE__ */ import_react26.default.createElement(ScmFormPathContextProvider, {
     key: value.id,
     path: `${nameWithPrefix}.${index}`
-  }, /* @__PURE__ */ import_react25.default.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ import_react25.default.createElement("td", {
+  }, /* @__PURE__ */ import_react26.default.createElement("tr", null, children, withDelete && !readOnly ? /* @__PURE__ */ import_react26.default.createElement("td", {
     className: "has-text-right"
-  }, /* @__PURE__ */ import_react25.default.createElement(import_ui_buttons3.Button, {
+  }, /* @__PURE__ */ import_react26.default.createElement(import_ui_buttons3.Button, {
     className: "px-4",
     onClick: () => remove(index),
     "aria-label": deleteLabel
-  }, /* @__PURE__ */ import_react25.default.createElement("span", {
+  }, /* @__PURE__ */ import_react26.default.createElement("span", {
     className: "icon is-small"
-  }, /* @__PURE__ */ import_react25.default.createElement("i", {
+  }, /* @__PURE__ */ import_react26.default.createElement("i", {
     className: "fas fa-trash"
   })))) : null)))));
 }
 var ControlledTable_default = ControlledTable;
 
 // src/table/ControlledColumn.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_react_hook_form8 = require("react-hook-form");
 var ControlledColumn = ({ name, children, ...props }) => {
   const { control } = useScmFormContext();
   const formPathPrefix = useScmFormPathContext();
-  const nameWithPrefix = (0, import_react26.useMemo)(() => formPathPrefix ? `${formPathPrefix}.${name}` : name, [formPathPrefix, name]);
+  const nameWithPrefix = (0, import_react27.useMemo)(() => formPathPrefix ? `${formPathPrefix}.${name}` : name, [formPathPrefix, name]);
   const value = (0, import_react_hook_form8.useWatch)({ control, name: nameWithPrefix, disabled: typeof children === "function" });
   const allValues = (0, import_react_hook_form8.useWatch)({ control, name: formPathPrefix, disabled: typeof children !== "function" });
-  return /* @__PURE__ */ import_react26.default.createElement("td", {
+  return /* @__PURE__ */ import_react27.default.createElement("td", {
     ...props
   }, typeof children === "function" ? children(allValues) : value);
 };
 var ControlledColumn_default = ControlledColumn;
 
 // src/AddListEntryForm.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_react_hook_form9 = require("react-hook-form");
 var import_ui_buttons4 = require("@scm-manager/ui-buttons");
 var import_react_i18next5 = require("react-i18next");
@@ -1005,18 +1067,18 @@ function AddListEntryForm({
     reset,
     formState: { isSubmitSuccessful, isDirty, isValid }
   } = form;
-  const translateWithExtraPrefix = (0, import_react27.useCallback)(
+  const translateWithExtraPrefix = (0, import_react28.useCallback)(
     (key, ...args) => t(`${prefixedNameWithoutIndices}.${key}`, ...args),
     [prefixedNameWithoutIndices, t]
   );
-  const onSubmit = (0, import_react27.useCallback)((data) => submit ? submit(data, append) : append(data), [append, submit]);
+  const onSubmit = (0, import_react28.useCallback)((data) => submit ? submit(data, append) : append(data), [append, submit]);
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") })
   });
   const titleLabel = translateWithExtraPrefix("title", {
     defaultValue: defaultTranslate("list.title.label", { entity: translateWithExtraPrefix("entity") })
   });
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (isSubmitSuccessful) {
       reset(defaultValues);
     }
@@ -1024,41 +1086,246 @@ function AddListEntryForm({
   if (readOnly) {
     return null;
   }
-  return /* @__PURE__ */ import_react27.default.createElement(ScmFormContextProvider, {
+  return /* @__PURE__ */ import_react28.default.createElement(ScmFormContextProvider, {
     ...form,
     t: translateWithExtraPrefix,
     formId: nameWithPrefix
-  }, /* @__PURE__ */ import_react27.default.createElement(ScmFormPathContextProvider, {
+  }, /* @__PURE__ */ import_react28.default.createElement(ScmFormPathContextProvider, {
     path: ""
-  }, /* @__PURE__ */ import_react27.default.createElement("h3", {
+  }, /* @__PURE__ */ import_react28.default.createElement("h3", {
     className: "subtitle is-5"
-  }, titleLabel), /* @__PURE__ */ import_react27.default.createElement("form", {
+  }, titleLabel), /* @__PURE__ */ import_react28.default.createElement("form", {
     id: nameWithPrefix,
     onSubmit: form.handleSubmit(onSubmit),
     noValidate: true
-  }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ import_react27.default.createElement("div", {
+  }), typeof children === "function" ? children(form) : children, /* @__PURE__ */ import_react28.default.createElement("div", {
     className: "level-left"
-  }, /* @__PURE__ */ import_react27.default.createElement(import_ui_buttons4.Button, {
+  }, /* @__PURE__ */ import_react28.default.createElement(import_ui_buttons4.Button, {
     form: nameWithPrefix,
     type: "submit",
     variant: isNested ? void 0 : "secondary",
     disabled: disableSubmitWhenDirty && !isDirty || !isValid
-  }, submitButtonLabel)), /* @__PURE__ */ import_react27.default.createElement(StyledHr, null)));
+  }, submitButtonLabel)), /* @__PURE__ */ import_react28.default.createElement(StyledHr, null)));
 }
 var AddListEntryForm_default = AddListEntryForm;
 
+// src/combobox/ControlledComboboxField.tsx
+var import_react32 = __toESM(require("react"));
+var import_react_hook_form10 = require("react-hook-form");
+var import_classnames17 = __toESM(require("classnames"));
+
+// src/combobox/ComboboxField.tsx
+var import_react31 = __toESM(require("react"));
+var import_ui_components10 = require("@scm-manager/ui-components");
+
+// src/combobox/Combobox.tsx
+var import_react29 = __toESM(require("react"));
+var import_react30 = require("@headlessui/react");
+var import_classnames15 = __toESM(require("classnames"));
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_ui_components9 = require("@scm-manager/ui-components");
+var OptionsWrapper = (0, import_styled_components4.default)(import_react30.Combobox.Options).attrs({
+  className: "is-flex is-flex-direction-column has-rounded-border has-box-shadow is-overflow-hidden"
+})`
+  z-index: 400;
+  top: 2.5rem;
+  border: var(--scm-border);
+  background-color: var(--scm-secondary-background);
+  max-width: 35ch;
+
+  &:empty {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`;
+var StyledComboboxOption = import_styled_components4.default.li.attrs({
+  className: "px-3 py-2 has-text-inherit is-clickable is-size-6 is-borderless has-background-transparent"
+})`
+  line-height: inherit;
+  background-color: ${({ isActive }) => isActive ? "var(--scm-column-selection)" : ""};
+  word-break: break-all;
+  &[data-disabled] {
+    color: unset !important;
+    opacity: 40%;
+    cursor: unset !important;
+  }
+`;
+function ComboboxComponent(props, ref) {
+  var _a;
+  const [query, setQuery] = (0, import_react29.useState)("");
+  const { onQueryChange } = props;
+  (0, import_react29.useEffect)(() => onQueryChange && onQueryChange(query), [onQueryChange, query]);
+  let options;
+  if (Array.isArray(props.children)) {
+    options = props.children;
+  } else if (typeof props.options === "function") {
+    options = /* @__PURE__ */ import_react29.default.createElement(ComboboxOptions, {
+      children: props.children,
+      options: props.options,
+      query
+    });
+  } else {
+    options = (_a = props.options) == null ? void 0 : _a.map(
+      (o, index) => typeof props.children === "function" ? props.children(o, index) : /* @__PURE__ */ import_react29.default.createElement(import_react30.Combobox.Option, {
+        value: o,
+        key: o.label,
+        as: import_react29.Fragment
+      }, ({ active }) => /* @__PURE__ */ import_react29.default.createElement(StyledComboboxOption, {
+        isActive: active
+      }, o.displayValue ?? o.label))
+    );
+  }
+  return /* @__PURE__ */ import_react29.default.createElement(import_react30.Combobox, {
+    as: "div",
+    value: props.value,
+    onChange: (e) => props.onChange && props.onChange(e),
+    disabled: props.disabled || props.readOnly,
+    onKeyDown: (e) => props.onKeyDown && props.onKeyDown(e),
+    name: props.name,
+    form: props.form,
+    defaultValue: props.defaultValue,
+    nullable: props.nullable,
+    className: "is-relative is-flex-grow-1 is-flex",
+    by: "value"
+  }, /* @__PURE__ */ import_react29.default.createElement(import_react30.Combobox.Input, {
+    displayValue: (o) => o == null ? void 0 : o.label,
+    ref,
+    onChange: (e) => setQuery(e.target.value),
+    className: (0, import_classnames15.default)(props.className, "is-full-width", "input", "is-ellipsis-overflow"),
+    "aria-describedby": props["aria-describedby"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-label": props["aria-label"],
+    id: props.id,
+    placeholder: props.placeholder,
+    onBlur: props.onBlur,
+    ...(0, import_ui_components9.createAttributesForTesting)(props.testId)
+  }), /* @__PURE__ */ import_react29.default.createElement(OptionsWrapper, {
+    className: "is-absolute"
+  }, options));
+}
+function ComboboxOptions({ query, options, children }) {
+  const [optionsData, setOptionsData] = (0, import_react29.useState)([]);
+  const activePromise = (0, import_react29.useRef)();
+  (0, import_react29.useEffect)(() => {
+    const optionsExec = options(query);
+    if (optionsExec instanceof Promise) {
+      activePromise.current = optionsExec;
+      optionsExec.then((newOptions) => {
+        if (activePromise.current === optionsExec) {
+          setOptionsData(newOptions);
+        }
+      }).catch(() => {
+        if (activePromise.current === optionsExec) {
+          setOptionsData([]);
+        }
+      });
+    } else {
+      setOptionsData(optionsExec);
+    }
+  }, [options, query]);
+  return /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, optionsData == null ? void 0 : optionsData.map(
+    (o, index) => typeof children === "function" ? children(o, index) : /* @__PURE__ */ import_react29.default.createElement(import_react30.Combobox.Option, {
+      value: o,
+      key: o.label,
+      as: import_react29.Fragment
+    }, ({ active }) => /* @__PURE__ */ import_react29.default.createElement(StyledComboboxOption, {
+      isActive: active
+    }, o.displayValue ?? o.label))
+  ));
+}
+var Combobox = Object.assign(withForwardRef(ComboboxComponent), {
+  Option: StyledComboboxOption
+});
+var Combobox_default = Combobox;
+
+// src/combobox/ComboboxField.tsx
+var import_classnames16 = __toESM(require("classnames"));
+var ComboboxField = function ComboboxField2({
+  label,
+  helpText,
+  error,
+  className,
+  isLoading,
+  ...props
+}, ref) {
+  const labelId = (0, import_ui_components10.useGeneratedId)();
+  return /* @__PURE__ */ import_react31.default.createElement(Field_default, {
+    className
+  }, /* @__PURE__ */ import_react31.default.createElement(Label_default, {
+    id: labelId
+  }, label, helpText ? /* @__PURE__ */ import_react31.default.createElement(Help_default, {
+    className: "ml-1",
+    text: helpText
+  }) : null), /* @__PURE__ */ import_react31.default.createElement("div", {
+    className: (0, import_classnames16.default)("control", { "is-loading": isLoading })
+  }, /* @__PURE__ */ import_react31.default.createElement(Combobox_default, {
+    ...props,
+    ref,
+    "aria-labelledby": labelId
+  })));
+};
+var ComboboxField_default = withForwardRef(ComboboxField);
+
+// src/combobox/ControlledComboboxField.tsx
+function ControlledComboboxField({
+  name,
+  label,
+  helpText,
+  rules,
+  testId,
+  defaultValue,
+  readOnly,
+  className,
+  optionFactory = defaultOptionFactory,
+  ...props
+}) {
+  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_react32.default.createElement(import_react_hook_form10.Controller, {
+    control,
+    name: nameWithPrefix,
+    rules,
+    defaultValue,
+    render: ({ field: { onChange, value, ...field }, fieldState }) => /* @__PURE__ */ import_react32.default.createElement(ComboboxField_default, {
+      form: formId,
+      readOnly: readOnly ?? formReadonly,
+      className: (0, import_classnames17.default)("column", className),
+      ...props,
+      ...field,
+      label: labelTranslation,
+      helpText: helpTextTranslation,
+      onChange: (e) => onChange(e == null ? void 0 : e.value),
+      value: optionFactory(value),
+      error: fieldState.error ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `select-${nameWithPrefix}`
+    })
+  });
+}
+var ControlledComboboxField_default = ControlledComboboxField;
+
 // src/ConfigurationForm.tsx
 var import_ui_api = require("@scm-manager/ui-api");
-var import_ui_components9 = require("@scm-manager/ui-components");
-var import_react28 = __toESM(require("react"));
+var import_ui_components11 = require("@scm-manager/ui-components");
+var import_react33 = __toESM(require("react"));
 var import_react_i18next6 = require("react-i18next");
 function ConfigurationForm({ link, children, ...formProps }) {
   const { initialConfiguration, isReadOnly, update, isLoading } = (0, import_ui_api.useConfigLink)(link);
   const [t] = (0, import_react_i18next6.useTranslation)("commons", { keyPrefix: "form" });
   if (isLoading || !initialConfiguration) {
-    return /* @__PURE__ */ import_react28.default.createElement(import_ui_components9.Loading, null);
+    return /* @__PURE__ */ import_react33.default.createElement(import_ui_components11.Loading, null);
   }
-  return /* @__PURE__ */ import_react28.default.createElement(Form_default, {
+  return /* @__PURE__ */ import_react33.default.createElement(Form_default, {
     onSubmit: update,
     defaultValues: initialConfiguration,
     readOnly: isReadOnly,
@@ -1168,11 +1435,14 @@ var Form2 = Object.assign(Form_default, {
   Table: Object.assign(ControlledTable_default, {
     Column: ControlledColumn_default
   }),
-  ChipInput: ControlledChipInputField_default
+  ChipInput: ControlledChipInputField_default,
+  Combobox: ControlledComboboxField_default
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ChipInputField,
+  Combobox,
+  ComboboxField,
   ConfigurationForm,
   Form,
   Select,