@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/forms/combobox/Combobox.tsx

@@ -0,0 +1,223 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+  ForwardedRef,
+  Fragment,
+  KeyboardEventHandler,
+  ReactElement,
+  Ref,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import classNames from "classnames";
+import styled from "styled-components";
+import { withForwardRef } from "../helpers";
+import { createAttributesForTesting } from "../../helpers";
+import { Option } from "@scm-manager/ui-types";
+
+const OptionsWrapper = styled(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;
+  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;
+  }
+`;
+
+const StyledComboboxOption = styled.li.attrs({
+  className: "px-3 py-2 has-text-inherit is-clickable is-size-6 is-borderless has-background-transparent",
+})<{ isActive: boolean }>`
+  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;
+  }
+  > a {
+    color: inherit !important;
+  }
+`;
+
+type BaseProps<T> = {
+  className?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  value?: Option<T> | null;
+  onChange?: (value?: Option<T>) => void;
+  onBlur?: () => void;
+  disabled?: boolean;
+  defaultValue?: Option<T>;
+  nullable?: boolean;
+  readOnly?: boolean;
+  onQueryChange?: (value: string) => void;
+  id?: string;
+  placeholder?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-label"?: string;
+  testId?: string;
+  ref?: Ref<HTMLInputElement>;
+  form?: string;
+  name?: string;
+};
+
+export type ComboboxProps<T> =
+  | (BaseProps<T> & {
+      options: Array<Option<T>> | ((query: string) => Array<Option<T>> | Promise<Array<Option<T>>>);
+      children?: (option: Option<T>, index: number) => ReactElement;
+    })
+  | (BaseProps<T> & { children: Array<ReactElement | null>; options?: never });
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInputElement>) {
+  const [query, setQuery] = useState("");
+  const { onQueryChange } = props;
+
+  useEffect(() => onQueryChange && onQueryChange(query), [onQueryChange, query]);
+
+  let options;
+
+  if (Array.isArray(props.children)) {
+    options = props.children;
+  } else if (typeof props.options === "function") {
+    options = <ComboboxOptions<T> children={props.children} options={props.options} query={query} />;
+  } else {
+    options = props.options?.map((o, index) =>
+      typeof props.children === "function" ? (
+        props.children(o, index)
+      ) : (
+        <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
+          {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
+        </HeadlessCombobox.Option>
+      )
+    );
+  }
+
+  return (
+    <HeadlessCombobox
+      as="div"
+      value={props.value}
+      onChange={(e?: Option<T>) => props.onChange && props.onChange(e)}
+      disabled={props.disabled || props.readOnly}
+      name={props.name}
+      form={props.form}
+      defaultValue={props.defaultValue}
+      // @ts-ignore
+      nullable={props.nullable}
+      className="is-relative is-flex-grow-1 is-flex"
+      by="value"
+    >
+      <HeadlessCombobox.Input<Option<T>>
+        displayValue={(o) => o?.label}
+        ref={ref}
+        onChange={(e) => setQuery(e.target.value)}
+        className={classNames(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}
+        autoComplete="off"
+        onKeyDown={(e) => {
+          props.onKeyDown && props.onKeyDown(e);
+          }}
+        {...createAttributesForTesting(props.testId)}
+      />
+      <OptionsWrapper className="is-absolute">{options}</OptionsWrapper>
+    </HeadlessCombobox>
+  );
+}
+
+type ComboboxOptionsProps<T> = {
+  options: (query: string) => Array<Option<T>> | Promise<Array<Option<T>>>;
+  children?: (option: Option<T>, index: number) => ReactElement;
+  query: string;
+};
+
+function ComboboxOptions<T>({ query, options, children }: ComboboxOptionsProps<T>) {
+  const [optionsData, setOptionsData] = useState<Array<Option<T>>>([]);
+  const activePromise = useRef<Promise<Array<Option<T>>>>();
+
+  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 (
+    <>
+      {optionsData?.map((o, index) =>
+        typeof children === "function" ? (
+          children(o, index)
+        ) : (
+          <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
+            {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
+          </HeadlessCombobox.Option>
+        )
+      )}
+    </>
+  );
+}
+
+const Combobox = Object.assign(withForwardRef(ComboboxComponent), {
+  Option: StyledComboboxOption,
+});
+
+export default Combobox;

package/src/base/forms/combobox/ComboboxField.tsx

@@ -0,0 +1,62 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import Field from "../base/Field";
+import Label from "../base/label/Label";
+import Help from "../base/help/Help";
+import React from "react";
+import { useAriaId } from "../../helpers";
+import { withForwardRef } from "../helpers";
+import Combobox, { ComboboxProps } from "./Combobox";
+import classNames from "classnames";
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+const ComboboxField = function ComboboxField<T>(
+  {
+    label,
+    helpText,
+    error,
+    className,
+    isLoading,
+    ...props
+  }: ComboboxProps<T> & { label: string; helpText?: string; error?: string; isLoading?: boolean },
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const labelId = useAriaId();
+  return (
+    <Field className={className}>
+      <Label id={labelId}>
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      <div className={classNames("control", { "is-loading": isLoading })}>
+        <Combobox {...props} ref={ref} aria-labelledby={labelId} />
+      </div>
+    </Field>
+  );
+};
+export default withForwardRef(ComboboxField);

package/src/base/forms/combobox/ControlledComboboxField.tsx

@@ -0,0 +1,96 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import { Controller, ControllerRenderProps, Path } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { useScmFormPathContext } from "../FormPathContext";
+import { defaultOptionFactory, prefixWithoutIndices } from "../helpers";
+import classNames from "classnames";
+import ComboboxField from "./ComboboxField";
+import { Option } from "@scm-manager/ui-types";
+
+type Props<T extends Record<string, unknown>> = Omit<
+  Parameters<typeof ComboboxField>[0],
+  "error" | "label" | keyof ControllerRenderProps
+> & {
+  rules?: ComponentProps<typeof Controller>["rules"];
+  name: Path<T>;
+  label?: string;
+  optionFactory?: (val: any) => Option<unknown>;
+};
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+function ControlledComboboxField<T extends Record<string, unknown>>({
+  name,
+  label,
+  helpText,
+  rules,
+  testId,
+  defaultValue,
+  readOnly,
+  className,
+  optionFactory = defaultOptionFactory,
+  ...props
+}: Props<T>) {
+  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 (
+    <Controller
+      control={control}
+      name={nameWithPrefix}
+      rules={rules}
+      defaultValue={defaultValue as never}
+      render={({ field: { onChange, value, ...field }, fieldState }) => (
+        // @ts-ignore
+        <ComboboxField
+          form={formId}
+          readOnly={readOnly ?? formReadonly}
+          className={classNames("column", className)}
+          {...props}
+          {...field}
+          label={labelTranslation}
+          helpText={helpTextTranslation}
+          onChange={(e) => onChange(e?.value)}
+          value={optionFactory(value)}
+          error={
+            fieldState.error
+              ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+              : undefined
+          }
+          testId={testId ?? `select-${nameWithPrefix}`}
+        />
+      )}
+    />
+  );
+}
+
+export default ControlledComboboxField;

package/src/base/forms/headless-chip-input/ChipInput.tsx

@@ -0,0 +1,237 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  ComponentType,
+  Context,
+  createContext,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  LiHTMLAttributes,
+  ReactElement,
+  RefObject,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Option } from "@scm-manager/ui-types";
+import { mergeRefs, withForwardRef } from "../helpers";
+import { Button } from "../../buttons";
+
+type ChipInputContextType<T> = {
+  add(newValue: Option<T>): void;
+  remove(index: number): void;
+  inputRef: RefObject<HTMLInputElement>;
+  disabled?: boolean;
+  readOnly?: boolean;
+};
+
+const ChipInputContext = createContext<ChipInputContextType<never>>(null as unknown as ChipInputContextType<never>);
+
+function getChipInputContext<T>() {
+  return ChipInputContext as unknown as Context<ChipInputContextType<T>>;
+}
+
+type CustomNewChipInputProps<T> = {
+  onChange: (newValue: Option<T>) => void;
+  value?: Option<T> | null;
+  readOnly?: boolean;
+  disabled?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
+  className?: string;
+  placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};
+
+const DefaultNewChipInput = React.forwardRef<HTMLInputElement, CustomNewChipInputProps<string>>(
+  ({ onChange, value, ...props }, ref) => {
+    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (e.currentTarget.value) {
+            onChange({ label: e.currentTarget.value, value: e.currentTarget.value });
+          }
+          return false;
+        }
+      },
+      [onChange]
+    );
+
+    return (
+      <div className="is-flex-grow-1">
+        <input onKeyDown={handleKeyDown} {...props} ref={ref} />
+      </div>
+    );
+  }
+);
+
+type ChipDeleteProps = {
+  asChild?: boolean;
+  index: number;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const ChipDelete = React.forwardRef<HTMLButtonElement, ChipDeleteProps>(({ asChild, index, ...props }, ref) => {
+  const { remove, disabled } = useContext(ChipInputContext);
+  const Comp = asChild ? Slot : "button";
+
+  if (disabled) {
+    return null;
+  }
+
+  return <Comp {...props} ref={ref} type="button" onClick={() => remove(index)} />;
+});
+
+type NewChipInputProps = {
+  children?: ReactElement | null;
+  ref?: React.Ref<HTMLInputElement>;
+  className?: string;
+  placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const NewChipInput = withForwardRef(function NewChipInput<T>(
+  props: NewChipInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const { add, disabled, readOnly, inputRef } = useContext(getChipInputContext<T>());
+
+  const Comp = props.children ? Slot : DefaultNewChipInput;
+  return React.createElement(Comp as unknown as ComponentType<CustomNewChipInputProps<T>>, {
+    ...props,
+    onChange: add,
+    readOnly,
+    disabled,
+    value: null,
+    ref: mergeRefs(ref, inputRef),
+  });
+});
+
+type ChipProps = { asChild?: boolean } & LiHTMLAttributes<HTMLLIElement>;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "li";
+
+  return <Comp {...props} ref={ref} />;
+});
+
+type Props<T> = {
+  value?: Option<T>[] | null;
+  onChange?: (newValue?: Option<T>[]) => void;
+  readOnly?: boolean;
+  disabled?: boolean;
+  isNewItemDuplicate?: (existingItem: Option<T>, newItem: Option<T>) => boolean;
+} & Omit<HTMLAttributes<HTMLUListElement>, "onChange">;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const ChipInput = withForwardRef(function ChipInput<T>(
+  { children, value = [], disabled, readOnly, onChange, isNewItemDuplicate, ...props }: Props<T>,
+  ref: React.ForwardedRef<HTMLUListElement>
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isInactive = useMemo(() => disabled || readOnly, [disabled, readOnly]);
+  const add = useCallback<(newValue: Option<T>) => void>(
+    (newItem) => {
+      if (
+        !isInactive &&
+        !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 = useCallback(
+    (index: number) => !isInactive && onChange && onChange(value?.filter((_, itdx) => itdx !== index)),
+    [isInactive, onChange, value]
+  );
+  const Context = getChipInputContext<T>();
+  return (
+    <Context.Provider
+      value={useMemo(
+        () => ({
+          disabled,
+          readOnly,
+          add,
+          remove,
+          inputRef,
+        }),
+        [add, disabled, readOnly, remove]
+      )}
+    >
+      <ul {...props} ref={ref}>
+        {children}
+      </ul>
+    </Context.Provider>
+  );
+});
+
+const AddButton = React.forwardRef<
+  HTMLButtonElement,
+  Omit<ComponentProps<typeof Button>, "onClick"> & { inputRef: RefObject<HTMLInputElement | null> }
+>(({ inputRef, children, ...props }, ref) => (
+  <Button
+    {...props}
+    onClick={() => inputRef.current?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }))}
+  >
+    {children}
+  </Button>
+));
+
+export default Object.assign(ChipInput, {
+  Chip: Object.assign(Chip, {
+    Delete: ChipDelete,
+  }),
+  AddButton,
+});

package/src/base/forms/helpers.ts

@@ -0,0 +1,74 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { UseFormReturn } from "react-hook-form";
+import { ForwardedRef, forwardRef, MutableRefObject, Ref, RefCallback } from "react";
+
+export function prefixWithoutIndices(path: string): string {
+  return path.replace(/(\.\d+)/g, "");
+}
+
+/**
+ * Works like {@link setValue} but recursively applies the whole {@link newValues} object.
+ *
+ * > *Important Note:* This deeply overwrites input values of fields in arrays,
+ * > but does **NOT** add or remove items to existing arrays.
+ * > This can therefore not be used to clear lists.
+ */
+export function setValues<T>(newValues: T, setValue: UseFormReturn<T>["setValue"], path = "") {
+  for (const [key, val] of Object.entries(newValues)) {
+    if (val !== null && typeof val === "object") {
+      if (Array.isArray(val)) {
+        val.forEach((subVal, idx) => setValues(subVal, setValue, path ? `${path}.${key}.${idx}` : `${key}.${idx}`));
+      } else {
+        setValues(val, setValue, path ? `${path}.${key}` : key);
+      }
+    } else {
+      const fullPath = path ? `${path}.${key}` : key;
+      setValue(fullPath as any, val, { shouldValidate: !fullPath.endsWith("Confirmation"), shouldDirty: true });
+    }
+  }
+}
+
+export function withForwardRef<T extends { name: string }>(component: T): T {
+  return forwardRef(component as unknown as any) as any;
+}
+
+export const defaultOptionFactory = (item: any) =>
+  typeof item === "object" && item !== null && "value" in item && typeof item["label"] === "string"
+    ? item
+    : { label: item as string, value: item };
+
+export function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | ForwardedRef<T>>) {
+  return (el: T) =>
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+    });
+}