@scm-manager/ui-core 4.0.0-REACT19-20250825-073633 → 4.0.0-REACT19-20250910-124634

package/src/base/forms/checkbox/Checkbox.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, Ref, FC } from "react";
 import { createAttributesForTesting } from "../../helpers";
 import Help from "../base/help/Help";
 import styled from "styled-components";
@@ -36,71 +36,53 @@ type InputFieldProps = {
   descriptionText?: string;
   testId?: string;
   labelClassName?: string;
+  ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
 
 /**
  * @see https://bulma.io/documentation/form/checkbox/
  */
-const Checkbox = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  (
-    {
-      readOnly,
-      label,
-      descriptionText,
-      className,
-      labelClassName,
-      value,
-      name,
-      checked,
-      defaultChecked,
-      defaultValue,
-      testId,
-      helpText,
-      ...props
-    },
-    ref
-  ) => {
-    const descriptionId = descriptionText ? `checkbox-description-${name}` : undefined;
-    return (
-      <>
-        {descriptionText ? <p id={descriptionId}>{descriptionText}</p> : null}
-        <StyledLabel
-          className={classNames("checkbox is-align-items-center", labelClassName)}
-          // @ts-ignore bulma uses the disabled attribute on labels, although it is not part of the html spec
-          disabled={readOnly || props.disabled}
-        >
-          {readOnly ? (
-            <>
-              <input
-                type="hidden"
-                name={name}
-                value={value}
-                defaultValue={defaultValue}
-                checked={checked}
-                defaultChecked={defaultChecked}
-                aria-describedby={descriptionId}
-                readOnly
-              />
-              <StyledInput
-                type="checkbox"
-                className={classNames("m-3", className)}
-                ref={ref}
-                value={value}
-                defaultValue={defaultValue}
-                checked={checked}
-                defaultChecked={defaultChecked}
-                aria-describedby={descriptionId}
-                {...props}
-                {...createAttributesForTesting(testId)}
-                disabled
-              />
-            </>
-          ) : (
+const Checkbox: FC<InputFieldProps> = ({
+  readOnly,
+  label,
+  descriptionText,
+  className,
+  labelClassName,
+  value,
+  name,
+  checked,
+  defaultChecked,
+  defaultValue,
+  testId,
+  helpText,
+  ref,
+  ...props
+}) => {
+  const descriptionId = descriptionText ? `checkbox-description-${name}` : undefined;
+  return (
+    <>
+      {descriptionText ? <p id={descriptionId}>{descriptionText}</p> : null}
+      <StyledLabel
+        className={classNames("checkbox is-align-items-center", labelClassName)}
+        // @ts-ignore bulma uses the disabled attribute on labels, although it is not part of the html spec
+        disabled={readOnly || props.disabled}
+      >
+        {readOnly ? (
+          <>
+            <input
+              type="hidden"
+              name={name}
+              value={value}
+              defaultValue={defaultValue}
+              checked={checked}
+              defaultChecked={defaultChecked}
+              aria-describedby={descriptionId}
+              readOnly
+            />
             <StyledInput
               type="checkbox"
               className={classNames("m-3", className)}
               ref={ref}
-              name={name}
               value={value}
               defaultValue={defaultValue}
               checked={checked}
@@ -108,14 +90,30 @@ const Checkbox = React.forwardRef<HTMLInputElement, InputFieldProps>(
               aria-describedby={descriptionId}
               {...props}
               {...createAttributesForTesting(testId)}
+              disabled
             />
-          )}
+          </>
+        ) : (
+          <StyledInput
+            type="checkbox"
+            className={classNames("m-3", className)}
+            ref={ref}
+            name={name}
+            value={value}
+            defaultValue={defaultValue}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            aria-describedby={descriptionId}
+            {...props}
+            {...createAttributesForTesting(testId)}
+          />
+        )}
+
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </StyledLabel>
+    </>
+  );
+};
 
-          {label}
-          {helpText ? <Help className="ml-1" text={helpText} /> : null}
-        </StyledLabel>
-      </>
-    );
-  }
-);
 export default Checkbox;

package/src/base/forms/checkbox/CheckboxField.tsx

@@ -14,18 +14,18 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { Ref, FC } from "react";
 import Field from "../base/Field";
 import Control from "../base/Control";
 import Checkbox from "./Checkbox";
 
-type Props = React.ComponentProps<typeof Checkbox>;
+type Props = React.ComponentProps<typeof Checkbox> & { ref?: Ref<HTMLInputElement> };
 
-const CheckboxField = React.forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
+const CheckboxField: FC<Props> = ({ className, ref, ...props }) => (
   <Field className={className}>
     <Control>
       <Checkbox ref={ref} {...props} />
     </Control>
   </Field>
-));
+);
 export default CheckboxField;

package/src/base/forms/chip-input/ChipInputField.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { KeyboardEventHandler, PropsWithRef, ReactElement, Ref, useCallback } from "react";
+import React, { KeyboardEventHandler, ReactElement, Ref, useCallback, FC } from "react";
 import { createAttributesForTesting, useAriaId } from "../../helpers";
 import Field from "../base/Field";
 import Label from "../base/label/Label";
@@ -26,18 +26,17 @@ import { createVariantClass, Variant } from "../variants";
 import ChipInput, { NewChipInput } from "../headless-chip-input/ChipInput";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useTranslation } from "react-i18next";
-import { withForwardRef } from "../helpers";
 import { Option } from "@scm-manager/ui-types";
 
-const ChipInputWrapper = React.forwardRef<HTMLUListElement, any>((props, ref) => (
+const ChipInputWrapper: FC<any> = ({ ref, ...props }) => (
   // @ts-ignore
   <ChipInput ref={ref} {...props} />
-));
+);
 
-const NewChipInputWrapper = React.forwardRef<HTMLUListElement, any>((props, ref) => (
+const NewChipInputWrapper: FC<any> = ({ ref, ...props }) => (
   // @ts-ignore
   <NewChipInput ref={ref} {...props} />
-));
+);
 
 const StyledChipInput = styled(ChipInputWrapper)`
   min-height: 40px;
@@ -102,29 +101,27 @@ const determineVariant = (error: string | undefined, warning: string | undefined
  * @beta
  * @since 2.44.0
  */
-const ChipInputField = function ChipInputField<T>(
-  {
-    label,
-    helpText,
-    information,
-    readOnly,
-    disabled,
-    error,
-    warning,
-    createDeleteText,
-    onChange,
-    placeholder,
-    value,
-    className,
-    testId,
-    id,
-    children,
-    isLoading,
-    isNewItemDuplicate,
-    ...props
-  }: PropsWithRef<InputFieldProps<T>>,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
+const ChipInputField = function ChipInputField<T>({
+  label,
+  helpText,
+  information,
+  readOnly,
+  disabled,
+  error,
+  warning,
+  createDeleteText,
+  onChange,
+  placeholder,
+  value,
+  className,
+  testId,
+  id,
+  children,
+  isLoading,
+  isNewItemDuplicate,
+  ref,
+  ...props
+}: InputFieldProps<T>) {
   const [t] = useTranslation("commons", { keyPrefix: "form.chipList" });
   const deleteTextCallback = useCallback(
     (item: any) => (createDeleteText ? createDeleteText(item) : t("delete", { item })),
@@ -185,4 +182,5 @@ const ChipInputField = function ChipInputField<T>(
     </Field>
   );
 };
-export default withForwardRef(ChipInputField);
+
+export default ChipInputField;

package/src/base/forms/chip-input/ControlledChipInputField.tsx

@@ -14,11 +14,11 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, Ref } from "react";
 import { Controller, ControllerRenderProps, Path } from "react-hook-form";
 import { useScmFormContext } from "../ScmFormContext";
 import { useScmFormPathContext } from "../FormPathContext";
-import { defaultOptionFactory, prefixWithoutIndices, withForwardRef } from "../helpers";
+import { defaultOptionFactory, prefixWithoutIndices } from "../helpers";
 import classNames from "classnames";
 import ChipInputField from "./ChipInputField";
 import { Option } from "@scm-manager/ui-types";
@@ -33,31 +33,29 @@ type Props<T extends Record<string, unknown>> = Omit<
   defaultValue?: string[];
   createDeleteText?: (value: string) => string;
   optionFactory?: (val: any) => Option<unknown>;
-  ref?: React.ForwardedRef<HTMLInputElement>;
+  ref?: Ref<HTMLInputElement>;
 };
 
 /**
  * @beta
  * @since 2.44.0
  */
-function ControlledChipInputField<T extends Record<string, unknown>>(
-  {
-    name,
-    label,
-    helpText,
-    rules,
-    testId,
-    defaultValue,
-    readOnly,
-    placeholder,
-    className,
-    createDeleteText,
-    children,
-    optionFactory = defaultOptionFactory,
-    ...props
-  }: Props<T>,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
+function ControlledChipInputField<T extends Record<string, unknown>>({
+  name,
+  label,
+  helpText,
+  rules,
+  testId,
+  defaultValue,
+  readOnly,
+  placeholder,
+  className,
+  createDeleteText,
+  children,
+  optionFactory = defaultOptionFactory,
+  ref,
+  ...props
+}: Props<T>) {
   const { control, t, readOnly: formReadonly } = useScmFormContext();
   const formPathPrefix = useScmFormPathContext();
 
@@ -102,4 +100,4 @@ function ControlledChipInputField<T extends Record<string, unknown>>(
   );
 }
 
-export default withForwardRef(ControlledChipInputField);
+export default ControlledChipInputField;

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

@@ -14,20 +14,10 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, {
-  ForwardedRef,
-  Fragment,
-  KeyboardEventHandler,
-  ReactElement,
-  Ref,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { 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";
 
@@ -104,7 +94,7 @@ export type ComboboxProps<T> =
  * @beta
  * @since 2.45.0
  */
-function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInputElement>) {
+function ComboboxComponent<T>({ ref, ...props }: ComboboxProps<T>) {
   const [query, setQuery] = useState("");
   const { onQueryChange } = props;
 
@@ -212,7 +202,7 @@ function ComboboxOptions<T>({ query, options, children }: ComboboxOptionsProps<T
   );
 }
 
-const Combobox = Object.assign(withForwardRef(ComboboxComponent), {
+const Combobox = Object.assign(ComboboxComponent, {
   Option: StyledComboboxOption,
 });
 

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

@@ -19,7 +19,6 @@ 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";
 import RequiredMarker from "../misc/RequiredMarker";
@@ -28,18 +27,16 @@ import RequiredMarker from "../misc/RequiredMarker";
  * @beta
  * @since 2.45.0
  */
-const ComboboxField = function ComboboxField<T>(
-  {
-    label,
-    helpText,
-    error,
-    className,
-    isLoading,
-    required,
-    ...props
-  }: ComboboxProps<T> & { label: string; helpText?: string; error?: string; isLoading?: boolean; required?: boolean },
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
+const ComboboxField = function ComboboxField<T>({
+  label,
+  helpText,
+  error,
+  className,
+  isLoading,
+  required,
+  ref,
+  ...props
+}: ComboboxProps<T> & { label: string; helpText?: string; error?: string; isLoading?: boolean; required?: boolean }) {
   const labelId = useAriaId();
   return (
     <Field className={className}>
@@ -55,4 +52,4 @@ const ComboboxField = function ComboboxField<T>(
     </Field>
   );
 };
-export default withForwardRef(ComboboxField);
+export default ComboboxField;

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

@@ -20,10 +20,12 @@ import React, {
   ComponentType,
   Context,
   createContext,
+  FC,
   HTMLAttributes,
   KeyboardEventHandler,
   LiHTMLAttributes,
   ReactElement,
+  Ref,
   RefObject,
   useCallback,
   useContext,
@@ -32,7 +34,7 @@ import React, {
 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Option } from "@scm-manager/ui-types";
-import { mergeRefs, withForwardRef } from "../helpers";
+import { mergeRefs } from "../helpers";
 import { Button } from "../../buttons";
 
 type ChipInputContextType<T> = {
@@ -54,46 +56,45 @@ type CustomNewChipInputProps<T> = {
   value?: Option<T> | null;
   readOnly?: boolean;
   disabled?: boolean;
-  ref?: React.Ref<HTMLInputElement>;
+  ref?: 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;
+const DefaultNewChipInput: FC<CustomNewChipInputProps<string>> = ({ onChange, value, ref, ...props }) => {
+  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 });
         }
-      },
-      [onChange],
-    );
-
-    return (
-      <div className="is-flex-grow-1">
-        <input onKeyDown={handleKeyDown} {...props} ref={ref} />
-      </div>
-    );
-  },
-);
+        return false;
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="is-flex-grow-1">
+      <input onKeyDown={handleKeyDown} {...props} ref={ref} />
+    </div>
+  );
+};
 
 type ChipDeleteProps = {
   asChild?: boolean;
   index: number;
+  ref?: Ref<HTMLButtonElement>;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">;
 
 /**
  * @beta
  * @since 2.44.0
  */
-export const ChipDelete = React.forwardRef<HTMLButtonElement, ChipDeleteProps>(({ asChild, index, ...props }, ref) => {
+export const ChipDelete: FC<ChipDeleteProps> = ({ asChild, index, ref, ...props }) => {
   const { remove, disabled } = useContext(ChipInputContext);
   const Comp = asChild ? Slot : "button";
 
@@ -102,11 +103,11 @@ export const ChipDelete = React.forwardRef<HTMLButtonElement, ChipDeleteProps>((
   }
 
   return <Comp {...props} ref={ref} type="button" onClick={() => remove(index)} />;
-});
+};
 
 type NewChipInputProps = {
   children?: ReactElement | null;
-  ref?: React.Ref<HTMLInputElement>;
+  ref: Ref<HTMLInputElement>;
   className?: string;
   placeholder?: string;
   id?: string;
@@ -117,10 +118,7 @@ type NewChipInputProps = {
  * @beta
  * @since 2.44.0
  */
-export const NewChipInput = withForwardRef(function NewChipInput<T>(
-  props: NewChipInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
+export const NewChipInput = function NewChipInput<T>(props: NewChipInputProps) {
   const { add, disabled, readOnly, inputRef } = useContext(getChipInputContext<T>());
 
   const Comp = props.children ? Slot : DefaultNewChipInput;
@@ -130,21 +128,20 @@ export const NewChipInput = withForwardRef(function NewChipInput<T>(
     readOnly,
     disabled,
     value: null,
-    ref: mergeRefs(ref, inputRef),
+    ref: mergeRefs(props.ref, inputRef),
   });
-});
-
-type ChipProps = { asChild?: boolean } & LiHTMLAttributes<HTMLLIElement>;
+};
 
+type ChipProps = { asChild?: boolean; ref?: Ref<HTMLLIElement> } & LiHTMLAttributes<HTMLLIElement>;
 /**
  * @beta
  * @since 2.44.0
  */
-export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(({ asChild, ...props }, ref) => {
+export const Chip: FC<ChipProps> = ({ asChild, ref, ...props }) => {
   const Comp = asChild ? Slot : "li";
 
   return <Comp {...props} ref={ref} />;
-});
+};
 
 type Props<T> = {
   value?: Option<T>[] | null;
@@ -152,16 +149,23 @@ type Props<T> = {
   readOnly?: boolean;
   disabled?: boolean;
   isNewItemDuplicate?: (existingItem: Option<T>, newItem: Option<T>) => boolean;
+  ref?: Ref<HTMLUListElement>;
 } & 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 ChipInput = function ChipInput<T>({
+  children,
+  value = [],
+  disabled,
+  readOnly,
+  onChange,
+  isNewItemDuplicate,
+  ref,
+  ...props
+}: Props<T>) {
   const inputRef = useRef<HTMLInputElement>(null);
   const isInactive = useMemo(() => disabled || readOnly, [disabled, readOnly]);
   const add = useCallback<(newValue: Option<T>) => void>(
@@ -207,19 +211,18 @@ const ChipInput = withForwardRef(function ChipInput<T>(
       </ul>
     </Context.Provider>
   );
-});
+};
 
-const AddButton = React.forwardRef<
-  HTMLButtonElement,
-  Omit<ComponentProps<typeof Button>, "onClick"> & { inputRef: RefObject<HTMLInputElement | null> }
->(({ inputRef, children, ...props }, ref) => (
+type AddButtonProps = Omit<ComponentProps<typeof Button>, "onClick"> & { inputRef: RefObject<HTMLInputElement | null> };
+
+const AddButton: FC<AddButtonProps> = ({ inputRef, children, ...props }) => (
   <Button
     {...props}
     onClick={() => inputRef.current?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }))}
   >
     {children}
   </Button>
-));
+);
 
 export default Object.assign(ChipInput, {
   Chip: Object.assign(Chip, {

package/src/base/forms/helpers.ts

@@ -15,7 +15,7 @@
  */
 
 import { FieldValues, DefaultValues, UseFormReturn } from "react-hook-form";
-import { ForwardedRef, forwardRef, MutableRefObject, Ref, RefCallback } from "react";
+import { RefCallback, RefObject } from "react";
 
 export function prefixWithoutIndices(path: string): string {
   return path.replace(/(\.\d+)/g, "");
@@ -31,7 +31,7 @@ export function prefixWithoutIndices(path: string): string {
 export function setValues<T extends FieldValues>(
   newValues: DefaultValues<T>,
   setValue: UseFormReturn<T>["setValue"],
-  path = ""
+  path = "",
 ) {
   for (const key of Object.keys(newValues)) {
     const val = newValues[key as keyof typeof newValues];
@@ -46,16 +46,12 @@ export function setValues<T extends FieldValues>(
   }
 }
 
-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>>) {
+export function mergeRefs<T>(...refs: Array<RefCallback<T> | RefObject<T | null> | null>) {
   return (el: T) =>
     refs.forEach((ref) => {
       if (ref) {