[TypeScript] Fix <DeleteWithConfirmButton> does not accept the component prop

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

@@ -52,9 +52,10 @@ import {
  *     return <Edit actions={<EditActions />} {...props} />;
  * };
  */
-export const DeleteButton = React.forwardRef(function DeleteButton<
-    RecordType extends RaRecord = any,
->(
+export const DeleteButton: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<DeleteButtonProps> &
+        React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef(function DeleteButton<RecordType extends RaRecord = any>(
     inProps: DeleteButtonProps<RecordType>,
     ref: React.ForwardedRef<HTMLButtonElement>
 ) {

packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx

@@ -26,6 +26,7 @@ import {
     NoRecordRepresentation,
     Themed,
     WithCustomTitleAndContent,
+    WithComponent,
     WithDefaultTranslation,
 } from './DeleteWithConfirmButton.stories';
 import { Label } from './DeleteButton.stories';
@@ -408,6 +409,18 @@ describe('<DeleteWithConfirmButton />', () => {
         await screen.findByText('Please confirm the deletion');
     });
 
+    it('should allow to render the button with a custom component', async () => {
+        render(<WithComponent />);
+        const button = within(
+            (await screen.findByText('War and Peace')).closest(
+                'tr'
+            ) as HTMLElement
+        ).getByText('Delete');
+        expect(button.closest('a')).not.toBeNull();
+        fireEvent.click(button);
+        await screen.findByText('Delete the book "War and Peace"?');
+    });
+
     it('should use the record representation in the confirmation title and content with a resource specific translation', async () => {
         render(<Basic />);
         fireEvent.click(

packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx

@@ -210,6 +210,23 @@ export const Basic = () => (
     </TestMemoryRouter>
 );
 
+export const WithComponent = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={
+                        <BookList>
+                            <DeleteWithConfirmButton component="a" />
+                        </BookList>
+                    }
+                />
+            </AdminUI>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
 export const WithDefaultTranslation = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <AdminContext

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

@@ -26,10 +26,30 @@ import { humanize, singularize } from 'inflection';
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
 
+type DeleteWithConfirmButtonComponent = <
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown,
+    RootComponent extends React.ElementType = 'button',
+>(
+    props: DeleteWithConfirmButtonProps<
+        RecordType,
+        MutationOptionsError,
+        RootComponent
+    > &
+        React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>
+) => React.ReactElement | null;
+
 export const DeleteWithConfirmButton = React.forwardRef(
-    function DeleteWithConfirmButton<RecordType extends RaRecord = any>(
-        inProps: DeleteWithConfirmButtonProps<RecordType>,
-        ref: React.ForwardedRef<HTMLButtonElement>
+    function DeleteWithConfirmButton<
+        RecordType extends RaRecord = any,
+        RootComponent extends React.ElementType = 'button',
+    >(
+        inProps: DeleteWithConfirmButtonProps<
+            RecordType,
+            unknown,
+            RootComponent
+        >,
+        ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>
     ) {
         const props = useThemeProps({
             props: inProps,
@@ -219,28 +239,29 @@ export const DeleteWithConfirmButton = React.forwardRef(
             </Fragment>
         );
     }
-);
+) as DeleteWithConfirmButtonComponent;
 
 const defaultIcon = <ActionDelete />;
 
-export interface DeleteWithConfirmButtonProps<
+export type DeleteWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
-> extends ButtonProps,
-        UseDeleteControllerParams<RecordType, MutationOptionsError> {
-    confirmTitle?: React.ReactNode;
-    confirmContent?: React.ReactNode;
-    icon?: React.ReactNode;
-    confirmColor?: 'primary' | 'warning';
-    onClick?: ReactEventHandler<any>;
-    // May be injected by Toolbar - sanitized in Button
-    /**
-     * @deprecated use `titleTranslateOptions` and `contentTranslateOptions` instead
-     */
-    translateOptions?: object;
-    titleTranslateOptions?: object;
-    contentTranslateOptions?: object;
-}
+    RootComponent extends React.ElementType = 'button',
+> = ButtonProps<RootComponent> &
+    UseDeleteControllerParams<RecordType, MutationOptionsError> & {
+        confirmTitle?: React.ReactNode;
+        confirmContent?: React.ReactNode;
+        icon?: React.ReactNode;
+        confirmColor?: 'primary' | 'warning';
+        onClick?: ReactEventHandler<any>;
+        // May be injected by Toolbar - sanitized in Button
+        /**
+         * @deprecated use `titleTranslateOptions` and `contentTranslateOptions` instead
+         */
+        translateOptions?: object;
+        titleTranslateOptions?: object;
+        contentTranslateOptions?: object;
+    };
 
 const PREFIX = 'RaDeleteWithConfirmButton';