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

package/build/index.mjs

@@ -21,6 +21,7 @@ import { Button } from "@scm-manager/ui-buttons";
 import styled from "styled-components";
 
 // src/helpers.ts
+import { forwardRef } from "react";
 function prefixWithoutIndices(path) {
   return path.replace(/(\.\d+)/g, "");
 }
@@ -38,6 +39,21 @@ function setValues(newValues, setValue, path = "") {
     }
   }
 }
+function withForwardRef(component) {
+  return 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 = styled.div`
@@ -614,10 +630,37 @@ import React20, {
   createContext,
   useCallback as useCallback3,
   useContext as useContext3,
-  useMemo as useMemo3
+  useMemo as useMemo3,
+  useRef
 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 var ChipInputContext = createContext(null);
+function getChipInputContext() {
+  return ChipInputContext;
+}
+var DefaultNewChipInput = React20.forwardRef(
+  ({ onChange, value, ...props }, ref) => {
+    const handleKeyDown = useCallback3(
+      (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__ */ React20.createElement("div", {
+      className: "is-flex-grow-1"
+    }, /* @__PURE__ */ React20.createElement("input", {
+      onKeyDown: handleKeyDown,
+      ...props,
+      ref
+    }));
+  }
+);
 var ChipDelete = React20.forwardRef(({ asChild, index, ...props }, ref) => {
   const { remove, disabled } = useContext3(ChipInputContext);
   const Comp = asChild ? Slot : "button";
@@ -631,29 +674,16 @@ var ChipDelete = React20.forwardRef(({ asChild, index, ...props }, ref) => {
     onClick: () => remove(index)
   });
 });
-var NewChipInput = React20.forwardRef(({ asChild, ...props }, ref) => {
-  const { add, value, disabled, readOnly } = useContext3(ChipInputContext);
-  const handleKeyDown = useCallback3(
-    (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 ? Slot : "input";
-  return /* @__PURE__ */ React20.createElement(Comp, {
+var NewChipInput = withForwardRef(function NewChipInput2(props, ref) {
+  const { add, disabled, readOnly, inputRef } = useContext3(getChipInputContext());
+  const Comp = props.children ? Slot : DefaultNewChipInput;
+  return React20.createElement(Comp, {
     ...props,
-    onKeyDown: handleKeyDown,
+    onChange: add,
     readOnly,
     disabled,
-    ref
+    value: null,
+    ref: mergeRefs(ref, inputRef)
   });
 });
 var Chip = React20.forwardRef(({ asChild, ...props }, ref) => {
@@ -663,34 +693,45 @@ var Chip = React20.forwardRef(({ asChild, ...props }, ref) => {
     ref
   });
 });
-var ChipInput = React20.forwardRef(
-  ({ children, value = [], disabled, readOnly, onChange, ...props }, ref) => {
-    const isInactive = useMemo3(() => disabled || readOnly, [disabled, readOnly]);
-    const add = useCallback3(
-      (newValue) => !isInactive && onChange && onChange([...value, newValue]),
-      [isInactive, onChange, value]
-    );
-    const remove = useCallback3(
-      (index) => !isInactive && onChange && onChange(value == null ? void 0 : value.filter((_, itdx) => itdx !== index)),
-      [isInactive, onChange, value]
-    );
-    return /* @__PURE__ */ React20.createElement(ChipInputContext.Provider, {
-      value: useMemo3(
-        () => ({
-          value,
-          disabled,
-          readOnly,
-          add,
-          remove
-        }),
-        [add, disabled, readOnly, remove, value]
-      )
-    }, /* @__PURE__ */ React20.createElement("ul", {
-      ...props,
-      ref
-    }, children));
-  }
-);
+var ChipInput = withForwardRef(function ChipInput2({ children, value = [], disabled, readOnly, onChange, isNewItemDuplicate, ...props }, ref) {
+  const inputRef = useRef(null);
+  const isInactive = useMemo3(() => disabled || readOnly, [disabled, readOnly]);
+  const add = useCallback3(
+    (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 = useCallback3(
+    (index) => !isInactive && onChange && onChange(value == null ? void 0 : value.filter((_, itdx) => itdx !== index)),
+    [isInactive, onChange, value]
+  );
+  const Context2 = getChipInputContext();
+  return /* @__PURE__ */ React20.createElement(Context2.Provider, {
+    value: useMemo3(
+      () => ({
+        disabled,
+        readOnly,
+        add,
+        remove,
+        inputRef
+      }),
+      [add, disabled, readOnly, remove]
+    )
+  }, /* @__PURE__ */ React20.createElement("ul", {
+    ...props,
+    ref
+  }, children));
+});
 var ChipInput_default = Object.assign(ChipInput, {
   Chip: Object.assign(Chip, {
     Delete: ChipDelete
@@ -712,78 +753,94 @@ var StyledChipInput = styled2(ChipInput_default)`
 var StyledInput = styled2(NewChipInput)`
   color: var(--scm-secondary-more-color);
   font-size: 1rem;
+  height: initial;
+  padding: 0;
+  border-radius: 0;
   &:focus {
     outline: none;
   }
 `;
-var ChipInputField = React21.forwardRef(
-  ({
-    label,
-    helpText,
-    readOnly,
-    disabled,
-    error,
-    createDeleteText,
-    onChange,
-    placeholder,
-    value,
-    className,
-    testId,
-    id,
-    ...props
-  }, ref) => {
-    const [t] = useTranslation2("commons", { keyPrefix: "form.chipList" });
-    const deleteTextCallback = useCallback4(
-      (item) => createDeleteText ? createDeleteText(item) : t("delete", { item }),
-      [createDeleteText, t]
-    );
-    const inputId = useGeneratedId3(id ?? testId);
-    const labelId = useGeneratedId3();
-    const inputDescriptionId = useGeneratedId3();
-    const variant = error ? "danger" : void 0;
-    return /* @__PURE__ */ React21.createElement(Field_default, {
-      className,
-      "aria-owns": inputId
-    }, /* @__PURE__ */ React21.createElement(Label_default, {
-      id: labelId
-    }, label, helpText ? /* @__PURE__ */ React21.createElement(Help_default, {
-      className: "ml-1",
-      text: helpText
-    }) : null), /* @__PURE__ */ React21.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__ */ React21.createElement(ChipInput_default.Chip, {
-      key: `${val}-${index}`,
-      className: "tag is-light"
-    }, val, /* @__PURE__ */ React21.createElement(ChipInput_default.Chip.Delete, {
-      "aria-label": deleteTextCallback(val),
-      index,
-      className: "delete is-small"
-    }))), /* @__PURE__ */ React21.createElement(StyledInput, {
-      ...props,
-      className: classNames12(
-        "is-borderless",
-        "is-flex-grow-1",
-        "has-background-transparent",
-        createVariantClass(variant)
-      ),
-      placeholder: !readOnly && !disabled ? placeholder : "",
-      id: inputId,
-      ref,
-      "aria-describedby": inputDescriptionId,
-      ...createAttributesForTesting4(testId)
-    })), /* @__PURE__ */ React21.createElement(VisuallyHidden, {
-      "aria-hidden": true,
-      id: inputDescriptionId
-    }, t("input.description")), error ? /* @__PURE__ */ React21.createElement(FieldMessage_default, {
-      variant
-    }, error) : null);
+var StyledDelete = styled2(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] = useTranslation2("commons", { keyPrefix: "form.chipList" });
+  const deleteTextCallback = useCallback4(
+    (item) => createDeleteText ? createDeleteText(item) : t("delete", { item }),
+    [createDeleteText, t]
+  );
+  const inputId = useGeneratedId3(id ?? testId);
+  const labelId = useGeneratedId3();
+  const inputDescriptionId = useGeneratedId3();
+  const variant = error ? "danger" : void 0;
+  return /* @__PURE__ */ React21.createElement(Field_default, {
+    className,
+    "aria-owns": inputId
+  }, /* @__PURE__ */ React21.createElement(Label_default, {
+    id: labelId
+  }, label, helpText ? /* @__PURE__ */ React21.createElement(Help_default, {
+    className: "ml-1",
+    text: helpText
+  }) : null), /* @__PURE__ */ React21.createElement("div", {
+    className: classNames12("control", { "is-loading": isLoading })
+  }, /* @__PURE__ */ React21.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__ */ React21.createElement(ChipInput_default.Chip, {
+    key: option.label,
+    className: "tag is-light is-overflow-hidden"
+  }, /* @__PURE__ */ React21.createElement("span", {
+    className: "is-ellipsis-overflow"
+  }, option.label), /* @__PURE__ */ React21.createElement(StyledDelete, {
+    "aria-label": deleteTextCallback(option.label),
+    index,
+    className: "delete is-small"
+  }))), /* @__PURE__ */ React21.createElement(StyledInput, {
+    ...props,
+    className: classNames12(
+      "is-borderless",
+      "has-background-transparent",
+      "is-shadowless",
+      "input",
+      "is-ellipsis-overflow",
+      createVariantClass(variant)
+    ),
+    placeholder: !readOnly && !disabled ? placeholder : "",
+    id: inputId,
+    ref,
+    "aria-describedby": inputDescriptionId,
+    ...createAttributesForTesting4(testId)
+  }, children ? children : null))), /* @__PURE__ */ React21.createElement(VisuallyHidden, {
+    "aria-hidden": true,
+    id: inputDescriptionId
+  }, t("input.description")), error ? /* @__PURE__ */ React21.createElement(FieldMessage_default, {
+    variant
+  }, error) : null);
+};
+var ChipInputField_default = withForwardRef(ChipInputField);
 
 // src/chip-input/ControlledChipInputField.tsx
 function ControlledChipInputField({
@@ -797,6 +854,8 @@ function ControlledChipInputField({
   placeholder,
   className,
   createDeleteText,
+  children,
+  optionFactory = defaultOptionFactory,
   ...props
 }) {
   const { control, t, readOnly: formReadonly } = useScmFormContext();
@@ -812,18 +871,20 @@ function ControlledChipInputField({
     name: nameWithPrefix,
     rules,
     defaultValue,
-    render: ({ field, fieldState }) => /* @__PURE__ */ React22.createElement(ChipInputField_default, {
+    render: ({ field: { value, onChange, ...field }, fieldState }) => /* @__PURE__ */ React22.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: classNames13("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;
@@ -1013,18 +1074,228 @@ function AddListEntryForm({
 }
 var AddListEntryForm_default = AddListEntryForm;
 
+// src/combobox/ControlledComboboxField.tsx
+import React30 from "react";
+import { Controller as Controller6 } from "react-hook-form";
+import classNames17 from "classnames";
+
+// src/combobox/ComboboxField.tsx
+import React29 from "react";
+import { useGeneratedId as useGeneratedId4 } from "@scm-manager/ui-components";
+
+// src/combobox/Combobox.tsx
+import React28, {
+  Fragment,
+  useEffect as useEffect3,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import classNames15 from "classnames";
+import styled4 from "styled-components";
+import { createAttributesForTesting as createAttributesForTesting5 } from "@scm-manager/ui-components";
+var OptionsWrapper = styled4(HeadlessCombobox.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 = styled4.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] = useState2("");
+  const { onQueryChange } = props;
+  useEffect3(() => onQueryChange && onQueryChange(query), [onQueryChange, query]);
+  let options;
+  if (Array.isArray(props.children)) {
+    options = props.children;
+  } else if (typeof props.options === "function") {
+    options = /* @__PURE__ */ React28.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__ */ React28.createElement(HeadlessCombobox.Option, {
+        value: o,
+        key: o.label,
+        as: Fragment
+      }, ({ active }) => /* @__PURE__ */ React28.createElement(StyledComboboxOption, {
+        isActive: active
+      }, o.displayValue ?? o.label))
+    );
+  }
+  return /* @__PURE__ */ React28.createElement(HeadlessCombobox, {
+    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__ */ React28.createElement(HeadlessCombobox.Input, {
+    displayValue: (o) => o == null ? void 0 : o.label,
+    ref,
+    onChange: (e) => setQuery(e.target.value),
+    className: classNames15(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,
+    ...createAttributesForTesting5(props.testId)
+  }), /* @__PURE__ */ React28.createElement(OptionsWrapper, {
+    className: "is-absolute"
+  }, options));
+}
+function ComboboxOptions({ query, options, children }) {
+  const [optionsData, setOptionsData] = useState2([]);
+  const activePromise = useRef2();
+  useEffect3(() => {
+    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__ */ React28.createElement(React28.Fragment, null, optionsData == null ? void 0 : optionsData.map(
+    (o, index) => typeof children === "function" ? children(o, index) : /* @__PURE__ */ React28.createElement(HeadlessCombobox.Option, {
+      value: o,
+      key: o.label,
+      as: Fragment
+    }, ({ active }) => /* @__PURE__ */ React28.createElement(StyledComboboxOption, {
+      isActive: active
+    }, o.displayValue ?? o.label))
+  ));
+}
+var Combobox = Object.assign(withForwardRef(ComboboxComponent), {
+  Option: StyledComboboxOption
+});
+var Combobox_default = Combobox;
+
+// src/combobox/ComboboxField.tsx
+import classNames16 from "classnames";
+var ComboboxField = function ComboboxField2({
+  label,
+  helpText,
+  error,
+  className,
+  isLoading,
+  ...props
+}, ref) {
+  const labelId = useGeneratedId4();
+  return /* @__PURE__ */ React29.createElement(Field_default, {
+    className
+  }, /* @__PURE__ */ React29.createElement(Label_default, {
+    id: labelId
+  }, label, helpText ? /* @__PURE__ */ React29.createElement(Help_default, {
+    className: "ml-1",
+    text: helpText
+  }) : null), /* @__PURE__ */ React29.createElement("div", {
+    className: classNames16("control", { "is-loading": isLoading })
+  }, /* @__PURE__ */ React29.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__ */ React30.createElement(Controller6, {
+    control,
+    name: nameWithPrefix,
+    rules,
+    defaultValue,
+    render: ({ field: { onChange, value, ...field }, fieldState }) => /* @__PURE__ */ React30.createElement(ComboboxField_default, {
+      form: formId,
+      readOnly: readOnly ?? formReadonly,
+      className: classNames17("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
 import { useConfigLink } from "@scm-manager/ui-api";
 import { Loading } from "@scm-manager/ui-components";
-import React28 from "react";
+import React31 from "react";
 import { useTranslation as useTranslation6 } from "react-i18next";
 function ConfigurationForm({ link, children, ...formProps }) {
   const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink(link);
   const [t] = useTranslation6("commons", { keyPrefix: "form" });
   if (isLoading || !initialConfiguration) {
-    return /* @__PURE__ */ React28.createElement(Loading, null);
+    return /* @__PURE__ */ React31.createElement(Loading, null);
   }
-  return /* @__PURE__ */ React28.createElement(Form_default, {
+  return /* @__PURE__ */ React31.createElement(Form_default, {
     onSubmit: update,
     defaultValues: initialConfiguration,
     readOnly: isReadOnly,
@@ -1134,10 +1405,13 @@ var Form2 = Object.assign(Form_default, {
   Table: Object.assign(ControlledTable_default, {
     Column: ControlledColumn_default
   }),
-  ChipInput: ControlledChipInputField_default
+  ChipInput: ControlledChipInputField_default,
+  Combobox: ControlledComboboxField_default
 });
 export {
   ChipInputField_default as ChipInputField,
+  Combobox_default as Combobox,
+  ComboboxField_default as ComboboxField,
   ConfigurationForm_default as ConfigurationForm,
   Form2 as Form,
   Select_default as Select,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scm-manager/ui-forms",
   "private": false,
-  "version": "2.44.2",
+  "version": "2.44.3-20230527-064447",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index.mjs",
@@ -16,7 +16,7 @@
     "@scm-manager/eslint-config": "^2.16.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-styles": "2.44.2",
+    "@scm-manager/ui-styles": "2.44.3-20230527-064447",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -32,7 +32,7 @@
     "tsup": "^6.2.3"
   },
   "peerDependencies": {
-    "@scm-manager/ui-components": "2.44.2",
+    "@scm-manager/ui-components": "2.44.3-20230527-064447",
     "classnames": "^2.3.1",
     "react": "17",
     "react-hook-form": "7",
@@ -41,9 +41,10 @@
     "styled-components": "5"
   },
   "dependencies": {
-    "@scm-manager/ui-buttons": "2.44.2",
-    "@scm-manager/ui-overlays": "2.44.2",
-    "@scm-manager/ui-api": "2.44.2",
+    "@scm-manager/ui-buttons": "2.44.3-20230527-064447",
+    "@scm-manager/ui-overlays": "2.44.3-20230527-064447",
+    "@scm-manager/ui-api": "2.44.3-20230527-064447",
+    "@headlessui/react": "^1.7.15",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-visually-hidden": "^1.0.3"
   },