Fix Button and IconButton types when used with experimental React (#2335

)

.changeset/large-suns-provide.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the prop types of the Button and IconButton components when used with experimental versions of React.

packages/circuit-ui/components/Button/Button.tsx

@@ -13,7 +13,12 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+} from 'react';
 import type { IconComponentType } from '@sumup/icons';
 
 import { CircuitError } from '../../util/errors.js';
@@ -57,7 +62,9 @@ export type ButtonProps = SharedButtonProps & {
  * The Button component enables the user to perform an action or navigate
  * to a different screen.
  */
-export const Button = createButtonComponent<ButtonProps>(
+export const Button: ForwardRefExoticComponent<
+  PropsWithoutRef<ButtonProps> & RefAttributes<any>
+> = createButtonComponent<ButtonProps>(
   'Button',
   ({ className, size: legacySize = 'm', stretch, ...props }) => {
     const size = legacyButtonSizeMap[legacySize] || legacySize;

packages/circuit-ui/components/Button/IconButton.tsx

@@ -13,7 +13,14 @@
  * limitations under the License.
  */
 
-import { Children, cloneElement, type ReactElement } from 'react';
+import {
+  Children,
+  cloneElement,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ReactElement,
+  type RefAttributes,
+} from 'react';
 import type { IconComponentType, IconProps } from '@sumup/icons';
 
 import { clsx } from '../../styles/clsx.js';
@@ -53,7 +60,9 @@ export type IconButtonProps = SharedButtonProps & {
  * The IconButton component enables the user to perform an action or navigate
  * to a different screen.
  */
-export const IconButton = createButtonComponent<IconButtonProps>(
+export const IconButton: ForwardRefExoticComponent<
+  PropsWithoutRef<IconButtonProps> & RefAttributes<any>
+> = createButtonComponent<IconButtonProps>(
   'IconButton',
   ({
     className,

packages/circuit-ui/components/Button/shared.tsx

@@ -15,9 +15,9 @@
 
 import {
   forwardRef,
-  ButtonHTMLAttributes,
-  AnchorHTMLAttributes,
-  ReactNode,
+  type ButtonHTMLAttributes,
+  type AnchorHTMLAttributes,
+  type ReactNode,
 } from 'react';
 import type { IconComponentType } from '@sumup/icons';