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

package/.turbo/turbo-test.log

@@ -0,0 +1,174 @@
+yarn run v1.22.22
+$ jest
+PASS src/base/shortcuts/iterator/keyboardIterator.test.tsx (11.405 s)
+PASS src/base/helpers/useDocumentTitle.test.ts (11.394 s)
+PASS src/base/text/textSplitAndReplace.test.ts (13.148 s)
+----------------------------------------|---------|----------|---------|---------|-------------------
+File                                    | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+----------------------------------------|---------|----------|---------|---------|-------------------
+All files                               |     2.3 |     2.15 |    1.33 |    2.27 |                   
+ src                                    |       0 |        0 |       0 |       0 |                   
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+ src/base                               |       0 |        0 |       0 |       0 |                   
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+ src/base/buttons                       |       0 |        0 |       0 |       0 |                   
+  Button.stories.tsx                    |       0 |      100 |       0 |       0 | 141-229           
+  Button.tsx                            |       0 |        0 |       0 |       0 | 27-231            
+  Icon.tsx                              |       0 |        0 |       0 |       0 | 38-39             
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+ src/base/forms                         |       0 |        0 |       0 |       0 |                   
+  AddListEntryForm.tsx                  |       0 |        0 |       0 |       0 | 27-97             
+  ConfigurationForm.tsx                 |       0 |        0 |       0 |       0 | 40-47             
+  Form.stories.tsx                      |       0 |      100 |       0 |       0 | 477-756           
+  Form.tsx                              |       0 |        0 |       0 |       0 | 32-171            
+  FormPathContext.tsx                   |       0 |        0 |       0 |       0 | 19-64             
+  FormRow.tsx                           |       0 |        0 |       0 |       0 | 22-23             
+  ScmFormContext.tsx                    |       0 |      100 |       0 |       0 | 27-37             
+  ScmFormListContext.tsx                |       0 |        0 |       0 |       0 | 24-57             
+  helpers.ts                            |       0 |        0 |       0 |       0 | 21-61             
+  index.ts                              |       0 |      100 |     100 |       0 | 53-64             
+  resourceHooks.ts                      |       0 |        0 |       0 |       0 | 23-151            
+  variants.ts                           |       0 |        0 |       0 |       0 | 17-19             
+ src/base/forms/base                    |       0 |        0 |       0 |       0 |                   
+  Control.tsx                           |       0 |      100 |       0 |       0 | 24-25             
+  ExpandableText.tsx                    |       0 |      100 |       0 |       0 | 40-41             
+  Field.tsx                             |       0 |        0 |       0 |       0 | 20-25             
+ src/base/forms/base/field-message      |       0 |      100 |       0 |       0 |                   
+  FieldMessage.tsx                      |       0 |      100 |       0 |       0 | 23-24             
+ src/base/forms/base/help               |       0 |      100 |       0 |       0 |                   
+  Help.tsx                              |       0 |      100 |       0 |       0 | 21-22             
+ src/base/forms/base/label              |       0 |        0 |       0 |       0 |                   
+  Label.tsx                             |       0 |        0 |       0 |       0 | 20-25             
+ src/base/forms/checkbox                |       0 |        0 |       0 |       0 |                   
+  Checkbox.tsx                          |       0 |        0 |       0 |       0 | 23-62             
+  CheckboxField.tsx                     |       0 |      100 |       0 |       0 | 24-25             
+  ControlledCheckboxField.tsx           |       0 |        0 |       0 |       0 | 46-61             
+ src/base/forms/chip-input              |       0 |        0 |       0 |       0 |                   
+  ChipInputField.stories.tsx            |       0 |        0 |       0 |       0 | 77-147            
+  ChipInputField.tsx                    |       0 |        0 |       0 |       0 | 31-152            
+  ControlledChipInputField.tsx          |       0 |        0 |       0 |       0 | 59-83             
+ src/base/forms/combobox                |       0 |        0 |       0 |       0 |                   
+  Combobox.stories.tsx                  |       0 |      100 |       0 |       0 | 128-144           
+  Combobox.tsx                          |       0 |        0 |       0 |       0 | 24-205            
+  ComboboxField.tsx                     |       0 |        0 |       0 |       0 | 30-41             
+  ControlledComboboxField.tsx           |       0 |        0 |       0 |       0 | 52-74             
+ src/base/forms/headless-chip-input     |       0 |        0 |       0 |       0 |                   
+  ChipInput.tsx                         |       0 |        0 |       0 |       0 | 48-221            
+ src/base/forms/input                   |       0 |        0 |       0 |       0 |                   
+  ControlledInputField.tsx              |       0 |        0 |       0 |       0 | 48-63             
+  ControlledSecretConfirmationField.tsx |       0 |        0 |       0 |       0 | 55-113            
+  Input.tsx                             |       0 |      100 |       0 |       0 | 28-29             
+  InputField.tsx                        |       0 |        0 |       0 |       0 | 45-63             
+  Textarea.tsx                          |       0 |      100 |       0 |       0 | 28-29             
+ src/base/forms/list                    |       0 |        0 |       0 |       0 |                   
+  ControlledList.tsx                    |       0 |        0 |       0 |       0 | 47-68             
+ src/base/forms/misc                    |       0 |      100 |       0 |       0 |                   
+  RequiredMarker.tsx                    |       0 |      100 |       0 |       0 | 19-20             
+ src/base/forms/radio-button            |       0 |        0 |       0 |       0 |                   
+  ControlledRadioGroupField.tsx         |       0 |        0 |       0 |       0 | 51-65             
+  RadioButton.stories.tsx               |       0 |      100 |       0 |       0 | 236-379           
+  RadioButton.tsx                       |       0 |        0 |       0 |       0 | 25-103            
+  RadioButtonContext.tsx                |       0 |      100 |       0 |       0 | 27-34             
+  RadioGroup.tsx                        |       0 |        0 |       0 |       0 | 31-36             
+  RadioGroupField.tsx                   |       0 |        0 |       0 |       0 | 35-36             
+ src/base/forms/select                  |       0 |        0 |       0 |       0 |                   
+  ControlledSelectField.tsx             |       0 |        0 |       0 |       0 | 45-58             
+  Select.tsx                            |       0 |        0 |       0 |       0 | 33-38             
+  SelectField.tsx                       |       0 |        0 |       0 |       0 | 38-41             
+ src/base/forms/table                   |       0 |        0 |       0 |       0 |                   
+  ControlledColumn.tsx                  |       0 |        0 |       0 |       0 | 31-38             
+  ControlledTable.tsx                   |       0 |        0 |       0 |       0 | 49-84             
+ src/base/helpers                       |       0 |        0 |       0 |       0 |                   
+  devbuild.ts                           |       0 |        0 |       0 |       0 | 17-35             
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+  useAriaId.tsx                         |       0 |        0 |       0 |       0 | 19-22             
+  useDocumentTitle.ts                   |       0 |        0 |       0 |       0 | 29-52             
+ src/base/layout                        |       0 |      100 |     100 |       0 |                   
+  index.ts                              |       0 |      100 |     100 |       0 | 44-80             
+ src/base/layout/_helpers               |       0 |        0 |       0 |       0 |                   
+  with-classes.tsx                      |       0 |        0 |       0 |       0 | 27-38             
+ src/base/layout/card                   |       0 |        0 |       0 |       0 |                   
+  Card.stories.tsx                      |       0 |      100 |       0 |       0 | 126-147           
+  Card.tsx                              |       0 |        0 |       0 |       0 | 21-59             
+  CardDetail.tsx                        |       0 |        0 |       0 |       0 | 24-175            
+  CardRow.tsx                           |       0 |      100 |       0 |       0 | 26-37             
+  CardTitle.tsx                         |       0 |        0 |       0 |       0 | 41-42             
+ src/base/layout/card-list              |       0 |      100 |       0 |       0 |                   
+  CardList.stories.tsx                  |       0 |      100 |       0 |       0 | 205-279           
+  CardList.tsx                          |       0 |      100 |       0 |       0 | 29-63             
+ src/base/layout/collapsible            |       0 |        0 |       0 |       0 |                   
+  Collapsible.stories.tsx               |       0 |      100 |       0 |       0 | 44-61             
+  Collapsible.tsx                       |       0 |        0 |       0 |       0 | 24-68             
+ src/base/layout/tabs                   |       0 |        0 |       0 |       0 |                   
+  TabTrigger.tsx                        |       0 |      100 |       0 |       0 | 27-28             
+  Tabs.stories.tsx                      |       0 |      100 |       0 |       0 | 50-69             
+  Tabs.tsx                              |       0 |        0 |       0 |       0 | 26-37             
+  TabsContent.tsx                       |       0 |      100 |     100 |       0 | 23                
+  TabsList.tsx                          |       0 |      100 |       0 |       0 | 27-28             
+ src/base/layout/templates/data-page    |       0 |        0 |       0 |       0 |                   
+  DataPage.stories.tsx                  |       0 |      100 |       0 |       0 | 215-322           
+  DataPageHeader.tsx                    |       0 |        0 |       0 |       0 | 27-89             
+ src/base/misc                          |       0 |        0 |       0 |       0 |                   
+  Image.tsx                             |       0 |        0 |       0 |       0 | 22-23             
+  Level.tsx                             |       0 |        0 |       0 |       0 | 26-27             
+  Loading.tsx                           |       0 |      100 |       0 |       0 | 23-36             
+  SubSubtitle.tsx                       |       0 |        0 |       0 |       0 | 22-23             
+  Subtitle.tsx                          |       0 |        0 |       0 |       0 | 22-23             
+  Title.tsx                             |       0 |        0 |       0 |       0 | 27-44             
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+ src/base/notifications                 |       0 |        0 |       0 |       0 |                   
+  BackendErrorNotification.tsx          |       0 |        0 |       0 |       0 | 26-136            
+  ErrorNotification.tsx                 |       0 |        0 |       0 |       0 | 28-63             
+  Notification.tsx                      |       0 |        0 |       0 |       0 | 29-32             
+  index.tsx                             |       0 |        0 |       0 |       0 |                   
+ src/base/overlays                      |       0 |      100 |     100 |       0 |                   
+  index.ts                              |       0 |      100 |     100 |       0 | 23-32             
+ src/base/overlays/dialog               |       0 |        0 |       0 |       0 |                   
+  Dialog.stories.tsx                    |       0 |      100 |       0 |       0 | 69-86             
+  Dialog.tsx                            |       0 |        0 |       0 |       0 | 25-49             
+ src/base/overlays/menu                 |       0 |        0 |       0 |       0 |                   
+  Menu.stories.tsx                      |       0 |      100 |       0 |       0 | 79-103            
+  Menu.tsx                              |       0 |        0 |       0 |       0 | 37-185            
+  MenuTrigger.tsx                       |       0 |      100 |       0 |       0 | 29-43             
+ src/base/overlays/popover              |       0 |      100 |       0 |       0 |                   
+  Popover.stories.tsx                   |       0 |      100 |       0 |       0 | 21-46             
+  Popover.tsx                           |       0 |      100 |       0 |       0 | 23-63             
+ src/base/overlays/tooltip              |       0 |        0 |       0 |       0 |                   
+  ExpandableHint.tsx                    |       0 |        0 |       0 |       0 | 29-59             
+  Tooltip.examples.js                   |       0 |      100 |     100 |       0 | 18-25             
+  Tooltip.tsx                           |       0 |      100 |       0 |       0 | 22-62             
+ src/base/shortcuts                     |       0 |        0 |       0 |       0 |                   
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+  usePauseShortcuts.ts                  |       0 |        0 |       0 |       0 | 27-33             
+  useShortcut.ts                        |       0 |        0 |       0 |       0 | 76-99             
+  useShortcutDocs.tsx                   |       0 |      100 |       0 |       0 | 25-44             
+ src/base/shortcuts/iterator            |       0 |        0 |       0 |       0 |                   
+  callbackIterator.ts                   |       0 |        0 |       0 |       0 | 19-252            
+  keyboardIterator.tsx                  |       0 |        0 |       0 |       0 | 28-193            
+ src/base/status                        |       0 |        0 |       0 |       0 |                   
+  StatusIcon.stories.tsx                |       0 |      100 |       0 |       0 | 71-106            
+  StatusIcon.tsx                        |       0 |        0 |       0 |       0 | 21-109            
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+ src/base/text                          |   56.52 |    66.66 |   45.45 |   55.55 |                   
+  SplitAndReplace.stories.tsx           |       0 |      100 |       0 |       0 | 82-141            
+  SplitAndReplace.tsx                   |       0 |        0 |       0 |       0 | 32-52             
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+  textSplitAndReplace.ts                |     100 |      100 |     100 |     100 |                   
+ src/routing                            |       0 |        0 |       0 |       0 |                   
+  admin.ts                              |       0 |      100 |     100 |       0 | 17-35             
+  group.ts                              |       0 |      100 |     100 |       0 | 17-20             
+  help.ts                               |       0 |      100 |     100 |       0 | 17-19             
+  import.ts                             |       0 |      100 |     100 |       0 | 17                
+  index.ts                              |       0 |        0 |       0 |       0 |                   
+  me.ts                                 |       0 |      100 |     100 |       0 | 17-19             
+  namespace.ts                          |       0 |        0 |       0 |       0 | 20-38             
+  repository.ts                         |       0 |        0 |       0 |       0 | 21-89             
+  user.ts                               |       0 |      100 |     100 |       0 | 17-20             
+----------------------------------------|---------|----------|---------|---------|-------------------
+
+Test Suites: 3 passed, 3 total
+Tests:       9 passed, 9 total
+Snapshots:   0 total
+Time:        39.472 s
+Ran all test suites.
+Done in 41.88s.

package/.turbo/turbo-typecheck.log

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-core",
-  "version": "4.0.0-REACT19-20250825-073633",
+  "version": "4.0.0-REACT19-20250910-124634",
   "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-20250825-073633",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20250910-124634",
     "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-20250825-073633",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20250910-124634",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",

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;