@scm-manager/ui-core 4.0.0-REACT19 → 4.0.0-REACT19-20250910-113025

package/.turbo/turbo-typecheck.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc
-Done in 32.87s.
+Done in 32.72s.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-core",
-  "version": "4.0.0-REACT19",
+  "version": "4.0.0-REACT19-20250910-113025",
   "main": "./src/index.ts",
   "license": "AGPL-3.0-only",
   "scripts": {
@@ -30,16 +30,16 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "1.0.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@scm-manager/ui-api": "4.0.0-REACT19",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20250910-113025",
     "mousetrap": "1.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.19.0",
     "@scm-manager/babel-preset": "^2.13.1",
-    "@scm-manager/eslint-config": "^2.17.0",
+    "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-types": "4.0.0-REACT19",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20250910-113025",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -75,4 +75,4 @@
       "jest-extended/all"
     ]
   }
-}
+}

package/src/base/buttons/Button.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FC, ReactNode, Ref } from "react";
 import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router";
 import classNames from "classnames";
 import { createAttributesForTesting } from "../helpers";
@@ -54,7 +54,10 @@ type BaseButtonProps = {
   testId?: string;
 };
 
-type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = BaseButtonProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+  };
 
 /**
  * Styled html button.
@@ -64,21 +67,19 @@ type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
  * @beta
  * @since 2.41.0
  */
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, isLoading, testId, type, children, ...props }, ref) => (
-    <button
-      type={type ?? "button"}
-      {...props}
-      className={classNames(createButtonClasses(variant, isLoading), className)}
-      ref={ref}
-      {...createAttributesForTesting(testId)}
-    >
-      {children}
-    </button>
-  ),
+export const Button: FC<ButtonProps> = ({ className, variant, isLoading, testId, type, children, ref, ...props }) => (
+  <button
+    type={type ?? "button"}
+    {...props}
+    className={classNames(createButtonClasses(variant, isLoading), className)}
+    ref={ref}
+    {...createAttributesForTesting(testId)}
+  >
+    {children}
+  </button>
 );
 
-type LinkButtonProps = BaseButtonProps & ReactRouterLinkProps;
+type LinkButtonProps = BaseButtonProps & ReactRouterLinkProps & { ref?: Ref<HTMLAnchorElement> };
 
 /**
  * Styled react router link.
@@ -88,34 +89,33 @@ type LinkButtonProps = BaseButtonProps & ReactRouterLinkProps;
  * @beta
  * @since 2.41.0
  */
-export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(
-  ({ className, variant, isLoading, testId, children, ...props }, ref) => (
-    <ReactRouterLink
-      {...props}
-      className={classNames(createButtonClasses(variant, isLoading), className)}
-      ref={ref}
-      {...createAttributesForTesting(testId)}
-    >
-      {children}
-    </ReactRouterLink>
-  ),
+export const LinkButton: FC<LinkButtonProps> = ({ className, variant, isLoading, testId, children, ref, ...props }) => (
+  <ReactRouterLink
+    {...props}
+    className={classNames(createButtonClasses(variant, isLoading), className)}
+    ref={ref}
+    {...createAttributesForTesting(testId)}
+  >
+    {children}
+  </ReactRouterLink>
 );
 
+type ExternalLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & { ref?: Ref<HTMLAnchorElement> };
+
 /**
  * External links open in a new browser tab with rel flags "noopener" and "noreferrer" set by default.
  *
  * @beta
  * @since 2.44.0
  */
-export const ExternalLink = React.forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>>(
-  ({ children, ...props }, ref) => (
-    <a target="_blank" rel="noreferrer noopener" {...props} ref={ref}>
-      {children}
-    </a>
-  ),
+export const ExternalLink: FC<ExternalLinkProps> = ({ children, ref, ...props }) => (
+  <a target="_blank" rel="noreferrer noopener" {...props} ref={ref}>
+    {children}
+  </a>
 );
 
-type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ExternalLinkButtonProps = BaseButtonProps &
+  AnchorHTMLAttributes<HTMLAnchorElement> & { ref?: Ref<HTMLAnchorElement> };
 
 /**
  * Styled {@link ExternalLink}.
@@ -126,17 +126,23 @@ type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchor
  * @since 2.41.0
  * @see ExternalLink
  */
-export const ExternalLinkButton = React.forwardRef<HTMLAnchorElement, ExternalLinkButtonProps>(
-  ({ className, variant, isLoading, testId, children, ...props }, ref) => (
-    <ExternalLink
-      {...props}
-      className={classNames(createButtonClasses(variant, isLoading), className)}
-      ref={ref}
-      {...createAttributesForTesting(testId)}
-    >
-      {children}
-    </ExternalLink>
-  ),
+export const ExternalLinkButton: FC<ExternalLinkButtonProps> = ({
+  className,
+  variant,
+  isLoading,
+  testId,
+  children,
+  ref,
+  ...props
+}) => (
+  <ExternalLink
+    {...props}
+    className={classNames(createButtonClasses(variant, isLoading), className)}
+    ref={ref}
+    {...createAttributesForTesting(testId)}
+  >
+    {children}
+  </ExternalLink>
 );
 
 const StyledIconButton = styled.button`
@@ -194,6 +200,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: IconButtonVariant;
   children: ReactNode;
   size?: IconButtonSize;
+  ref?: Ref<HTMLButtonElement>;
 };
 
 /**
@@ -204,19 +211,26 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  * @beta
  * @since 3.2.0
  */
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ className, variant = "default", size = "medium", testId, type, children, ...props }, ref) => {
-    const elementAttributes = {
-      type: type ?? "button",
-      ...props,
-      className: classNames(createIconButtonClasses(variant), "button", "has-background-transparent"),
-      ref: ref,
-      ...createAttributesForTesting(testId),
-    };
-    return size === "small" ? (
-      <StyledIconButtonCircle {...elementAttributes}>{children}</StyledIconButtonCircle>
-    ) : (
-      <StyledIconButton {...elementAttributes}>{children}</StyledIconButton>
-    );
-  },
-);
+export const IconButton: FC<IconButtonProps> = ({
+  className,
+  variant = "default",
+  size = "medium",
+  testId,
+  type,
+  ref,
+  children,
+  ...props
+}) => {
+  const elementAttributes = {
+    type: type ?? "button",
+    ...props,
+    className: classNames(createIconButtonClasses(variant), "button", "has-background-transparent"),
+    ref: ref,
+    ...createAttributesForTesting(testId),
+  };
+  return size === "small" ? (
+    <StyledIconButtonCircle {...elementAttributes}>{children}</StyledIconButtonCircle>
+  ) : (
+    <StyledIconButton {...elementAttributes}>{children}</StyledIconButton>
+  );
+};

package/src/base/buttons/Icon.tsx

@@ -14,12 +14,13 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { Ref, FC } from "react";
 import classNames from "classnames";
 
 type Props = React.HTMLProps<HTMLElement> & {
   children?: string;
   type?: string;
+  ref?: Ref<HTMLElement>;
 };
 
 /**
@@ -34,7 +35,7 @@ type Props = React.HTMLProps<HTMLElement> & {
  * @see https://bulma.io/documentation/elements/icon/
  * @see https://fontawesome.com/search?o=r&m=free
  */
-const Icon = React.forwardRef<HTMLElement, Props>(({ children, className, type = "fas", ...props }, ref) => {
+const Icon: FC<Props> = ({ children, className, type = "fas", ref, ...props }) => {
   return (
     <span className={classNames(className, "icon")} aria-hidden="true" {...props} ref={ref}>
       <i
@@ -46,6 +47,6 @@ const Icon = React.forwardRef<HTMLElement, Props>(({ children, className, type =
       />
     </span>
   );
-});
+};
 
 export default Icon;

package/src/base/forms/ConfigurationForm.tsx

@@ -23,20 +23,20 @@ import { useTranslation } from "react-i18next";
 import { DefaultValues, FieldValues } from "react-hook-form";
 
 type Props<T extends HalRepresentation> =
-// eslint-disable-next-line prettier/prettier
+  // eslint-disable-next-line prettier/prettier
   Omit<ComponentProps<typeof Form<T>>, "onSubmit" | "defaultValues" | "readOnly" | "successMessageFallback"> & {
-  link: string;
-};
+    link: string;
+  };
 
 /**
  * @beta
  * @since 2.41.0
  */
 export function ConfigurationForm<T extends HalRepresentation & FieldValues>({
-                                                                               link,
-                                                                               children,
-                                                                               ...formProps
-                                                                             }: Props<T>) {
+  link,
+  children,
+  ...formProps
+}: Props<T>) {
   const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink<T>(link);
   const [t] = useTranslation("commons", { keyPrefix: "form" });
 

package/src/base/forms/FormRow.tsx

@@ -14,16 +14,16 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLProps } from "react";
+import React, { FC, HTMLProps, Ref } from "react";
 import classNames from "classnames";
 
-const FormRow = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
-  ({ className, children, hidden, ...rest }, ref) =>
-    hidden ? null : (
-      <div ref={ref} className={classNames("columns", className)} {...rest}>
-        {children}
-      </div>
-    )
-);
+type Props = HTMLProps<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };
+
+const FormRow: FC<Props> = ({ className, children, hidden, ref, ...rest }) =>
+  hidden ? null : (
+    <div ref={ref} className={classNames("columns", className)} {...rest}>
+      {children}
+    </div>
+  );
 
 export default FormRow;

package/src/base/forms/base/Control.tsx

@@ -14,13 +14,17 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLProps } from "react";
+import React, { HTMLProps, Ref, FC } from "react";
 import classNames from "classnames";
 
-const Control = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ className, children, ...rest }, ref) => (
+type ControlProps = HTMLProps<HTMLDivElement> & {
+  ref?: Ref<HTMLDivElement>;
+};
+
+const Control: FC<ControlProps> = ({ className, children, ref, ...rest }) => (
   <div className={classNames("control", className)} {...rest} ref={ref}>
     {children}
   </div>
-));
+);
 
 export default Control;

package/src/base/forms/base/ExpandableText.tsx

@@ -14,12 +14,13 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, FC, Ref } from "react";
 
 interface Props extends HTMLAttributes<HTMLParagraphElement> {
   descriptionText: string;
   extendedDescriptionText: string;
   id?: string;
+  ref?: Ref<HTMLDetailsElement>;
 }
 
 /**
@@ -29,22 +30,20 @@ interface Props extends HTMLAttributes<HTMLParagraphElement> {
  * with an icon to toggle the visibility of the extended text.
  *
  * @param desription - The text content that will always be displayed.
- * @param extended - The text content that will be displayed after you toggle details.
+ * @param extendedDescriptionText - The text content that will be displayed after you toggle details.
  * @param id - Additional props to pass to the `<details>` element.
  * @param ref - A ref to the `<details>` element.
  *
  * @beta
  * @since 3.9.0
  */
-const ExpandableText = React.forwardRef<HTMLDetailsElement, Props>(
-  ({ descriptionText, extendedDescriptionText, id }, ref) => {
-    return (
-      <details className="mb-2" id={id} ref={ref}>
-        <summary>{descriptionText}</summary>
-        <span>{extendedDescriptionText}</span>
-      </details>
-    );
-  }
-);
+const ExpandableText: FC<Props> = ({ descriptionText, extendedDescriptionText, id, ref }) => {
+  return (
+    <details className="mb-2" id={id} ref={ref}>
+      <summary>{descriptionText}</summary>
+      <span>{extendedDescriptionText}</span>
+    </details>
+  );
+};
 
 export default ExpandableText;

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;