fix: align button ref types with underlying elements to fix TS errors

Author: WiXSL

packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx

@@ -36,7 +36,7 @@ import {
  */
 export const BulkDeleteButton = React.forwardRef(function BulkDeleteButton(
     inProps: BulkDeleteButtonProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLButtonElement>
 ) {
     const { mutationMode = 'undoable', ...props } = useThemeProps({
         name: PREFIX,

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx

@@ -23,7 +23,7 @@ import { humanize, inflect } from 'inflection';
 export const BulkDeleteWithConfirmButton = React.forwardRef(
     function BulkDeleteWithConfirmButton(
         inProps: BulkDeleteWithConfirmButtonProps,
-        ref: React.ForwardedRef<HTMLElement>
+        ref: React.ForwardedRef<HTMLButtonElement>
     ) {
         const props = useThemeProps({
             props: inProps,

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -16,7 +16,7 @@ import { Button, type ButtonProps } from './Button';
 export const BulkDeleteWithUndoButton = React.forwardRef(
     function BulkDeleteWithUndoButton(
         inProps: BulkDeleteWithUndoButtonProps,
-        ref: React.ForwardedRef<HTMLElement>
+        ref: React.ForwardedRef<HTMLButtonElement>
     ) {
         const props = useThemeProps({
             props: inProps,

packages/ra-ui-materialui/src/button/BulkExportButton.tsx

@@ -39,7 +39,7 @@ import { Button, ButtonProps } from './Button';
  */
 export const BulkExportButton = React.forwardRef(function BulkExportButton(
     inProps: BulkExportButtonProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLButtonElement>
 ) {
     const props = useThemeProps({
         props: inProps,

packages/ra-ui-materialui/src/button/BulkUpdateButton.tsx

@@ -36,7 +36,7 @@ import {
  */
 export const BulkUpdateButton = React.forwardRef(function BulkUpdateButton(
     props: BulkUpdateButtonProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLButtonElement>
 ) {
     const {
         mutationMode = 'undoable',

packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx

@@ -22,7 +22,7 @@ import { humanize, inflect } from 'inflection';
 export const BulkUpdateWithConfirmButton = React.forwardRef(
     function BulkUpdateWithConfirmButton(
         inProps: BulkUpdateWithConfirmButtonProps,
-        ref: React.ForwardedRef<HTMLElement>
+        ref: React.ForwardedRef<HTMLButtonElement>
     ) {
         const props = useThemeProps({
             props: inProps,

packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx

@@ -16,7 +16,7 @@ import { Button, type ButtonProps } from './Button';
 export const BulkUpdateWithUndoButton = React.forwardRef(
     function BulkUpdateWithUndoButton(
         inProps: BulkUpdateWithUndoButtonProps,
-        ref: React.ForwardedRef<HTMLElement>
+        ref: React.ForwardedRef<HTMLButtonElement>
     ) {
         const props = useThemeProps({
             props: inProps,

packages/ra-ui-materialui/src/button/Button.tsx

@@ -29,12 +29,16 @@ import { Path, To } from 'react-router';
  *
  */
 type ButtonComponent = <RootComponent extends React.ElementType = 'button'>(
-    props: ButtonProps<RootComponent> & React.RefAttributes<HTMLElement>
+    props: ButtonProps<RootComponent> &
+        React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>
 ) => React.ReactElement | null;
 
 export const Button = React.forwardRef(function Button<
     RootComponent extends React.ElementType = 'button',
->(inProps: ButtonProps<RootComponent>, ref: React.ForwardedRef<HTMLElement>) {
+>(
+    inProps: ButtonProps<RootComponent>,
+    ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>
+) {
     const props = useThemeProps({ props: inProps, name: PREFIX });
     const {
         alignIcon = 'left',
@@ -65,7 +69,7 @@ export const Button = React.forwardRef(function Button<
         label && !disabled ? (
             <Tooltip title={translatedLabel}>
                 <IconButton
-                    ref={ref}
+                    ref={ref as React.Ref<HTMLButtonElement>}
                     // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
                     aria-label={
                         typeof translatedLabel === 'string'
@@ -83,7 +87,7 @@ export const Button = React.forwardRef(function Button<
             </Tooltip>
         ) : (
             <IconButton
-                ref={ref}
+                ref={ref as React.Ref<HTMLButtonElement>}
                 className={className}
                 color={color}
                 disabled={disabled}
@@ -96,7 +100,7 @@ export const Button = React.forwardRef(function Button<
         )
     ) : (
         <StyledButton
-            ref={ref}
+            ref={ref as React.Ref<HTMLButtonElement>}
             className={className}
             color={color}
             size={size}

packages/ra-ui-materialui/src/button/CloneButton.tsx

@@ -14,7 +14,7 @@ import { Button, ButtonProps } from './Button';
 
 export const CloneButton = React.forwardRef(function CloneButton(
     inProps: CloneButtonProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLAnchorElement>
 ) {
     const props = useThemeProps({
         props: inProps,

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -35,7 +35,7 @@ import { Button, type ButtonProps, type LocationDescriptor } from './Button';
  */
 const CreateButton = React.forwardRef(function CreateButton(
     inProps: CreateButtonProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLAnchorElement>
 ) {
     const props = useThemeProps({
         props: inProps,