@refinedev/antd 5.16.1 → 5.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.16.1",
+  "version": "5.17.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@refinedev/cli": "^2.5.3",
-    "@refinedev/ui-tests": "^1.3.2",
+    "@refinedev/ui-tests": "^1.4.0",
     "@refinedev/core": "^4.14.3",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.12.0",
+    "@refinedev/ui-types": "^1.15.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

package/src/components/buttons/clone/index.tsx

@@ -10,7 +10,10 @@ import {
     useRouterType,
     useLink,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonTestIds,
+    RefineButtonClassNames,
+} from "@refinedev/ui-types";
 
 import { CloneButtonProps } from "../types";
 
@@ -95,6 +98,7 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.CloneButton}
+                className={RefineButtonClassNames.CloneButton}
                 {...rest}
             >
                 {!hideText && (children ?? translate("buttons.clone", "Clone"))}

package/src/components/buttons/create/index.tsx

@@ -10,7 +10,10 @@ import {
     useRouterType,
     useLink,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { CreateButtonProps } from "../types";
 
@@ -93,6 +96,7 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.CreateButton}
+                className={RefineButtonClassNames.CreateButton}
                 type="primary"
                 {...rest}
             >

package/src/components/buttons/delete/index.tsx

@@ -10,7 +10,10 @@ import {
     pickNotDeprecated,
     useWarnAboutChange,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { DeleteButtonProps } from "../types";
 
@@ -116,6 +119,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
                 icon={<DeleteOutlined />}
                 disabled={data?.can === false}
                 data-testid={RefineButtonTestIds.DeleteButton}
+                className={RefineButtonClassNames.DeleteButton}
                 {...rest}
             >
                 {!hideText &&

package/src/components/buttons/edit/index.tsx

@@ -10,7 +10,10 @@ import {
     useRouterType,
     useLink,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { EditButtonProps } from "../types";
 
@@ -96,6 +99,7 @@ export const EditButton: React.FC<EditButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.EditButton}
+                className={RefineButtonClassNames.EditButton}
                 {...rest}
             >
                 {!hideText && (children ?? translate("buttons.edit", "Edit"))}

package/src/components/buttons/export/index.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { Button } from "antd";
 import { ExportOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { ExportButtonProps } from "../types";
 
@@ -24,6 +27,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
             type="default"
             icon={<ExportOutlined />}
             data-testid={RefineButtonTestIds.ExportButton}
+            className={RefineButtonClassNames.ExportButton}
             {...rest}
         >
             {!hideText && (children ?? translate("buttons.export", "Export"))}

package/src/components/buttons/import/index.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { Button, Upload } from "antd";
 import { ImportOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { ImportButtonProps } from "../types";
 
@@ -26,6 +29,7 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
             <Button
                 icon={<ImportOutlined />}
                 data-testid={RefineButtonTestIds.ImportButton}
+                className={RefineButtonClassNames.ImportButton}
                 {...buttonProps}
             >
                 {!hideText &&

package/src/components/buttons/list/index.tsx

@@ -12,7 +12,10 @@ import {
     useLink,
     pickNotDeprecated,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { ListButtonProps } from "../types";
 
@@ -95,6 +98,7 @@ export const ListButton: React.FC<ListButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.ListButton}
+                className={RefineButtonClassNames.ListButton}
                 {...rest}
             >
                 {!hideText &&

package/src/components/buttons/refresh/index.tsx

@@ -7,7 +7,10 @@ import {
     useResource,
     pickNotDeprecated,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { RefreshButtonProps } from "../types";
 
@@ -53,6 +56,7 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
             onClick={(e) => (onClick ? onClick(e as any) : refetch())}
             icon={<RedoOutlined spin={isFetching} />}
             data-testid={RefineButtonTestIds.RefreshButton}
+            className={RefineButtonClassNames.RefreshButton}
             {...rest}
         >
             {!hideText && (children ?? translate("buttons.refresh", "Refresh"))}

package/src/components/buttons/save/index.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { Button } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { SaveButtonProps } from "../types";
 
@@ -24,6 +27,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
             type="primary"
             icon={<SaveOutlined />}
             data-testid={RefineButtonTestIds.SaveButton}
+            className={RefineButtonClassNames.RefreshButton}
             {...rest}
         >
             {!hideText && (children ?? translate("buttons.save", "Save"))}

package/src/components/buttons/show/index.tsx

@@ -10,7 +10,10 @@ import {
     useRouterType,
     useLink,
 } from "@refinedev/core";
-import { RefineButtonTestIds } from "@refinedev/ui-types";
+import {
+    RefineButtonClassNames,
+    RefineButtonTestIds,
+} from "@refinedev/ui-types";
 
 import { ShowButtonProps } from "../types";
 
@@ -95,6 +98,7 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
                 disabled={data?.can === false}
                 title={createButtonDisabledTitle()}
                 data-testid={RefineButtonTestIds.ShowButton}
+                className={RefineButtonClassNames.ShowButton}
                 {...rest}
             >
                 {!hideText && (children ?? translate("buttons.show", "Show"))}

package/src/components/crud/create/index.tsx

@@ -10,7 +10,12 @@ import {
     useBack,
 } from "@refinedev/core";
 
-import { Breadcrumb, SaveButton, PageHeader } from "@components";
+import {
+    Breadcrumb,
+    SaveButton,
+    PageHeader,
+    SaveButtonProps,
+} from "@components";
 import { CreateProps } from "../types";
 
 /**
@@ -21,7 +26,7 @@ import { CreateProps } from "../types";
  */
 export const Create: React.FC<CreateProps> = ({
     title,
-    saveButtonProps,
+    saveButtonProps: saveButtonPropsFromProps,
     children,
     resource: resourceFromProps,
     isLoading = false,
@@ -50,13 +55,15 @@ export const Create: React.FC<CreateProps> = ({
             ? globalBreadcrumb
             : breadcrumbFromProps;
 
+    const saveButtonProps: SaveButtonProps = {
+        ...(isLoading ? { disabled: true } : {}),
+        ...saveButtonPropsFromProps,
+        htmlType: "submit",
+    };
+
     const defaultFooterButtons = (
         <>
-            <SaveButton
-                {...(isLoading ? { disabled: true } : {})}
-                {...saveButtonProps}
-                htmlType="submit"
-            />
+            <SaveButton {...saveButtonProps} />
         </>
     );
 
@@ -119,6 +126,7 @@ export const Create: React.FC<CreateProps> = ({
                                         ? footerButtons({
                                               defaultButtons:
                                                   defaultFooterButtons,
+                                              saveButtonProps: saveButtonProps,
                                           })
                                         : footerButtons
                                     : defaultFooterButtons}

package/src/components/crud/edit/index.tsx

@@ -21,6 +21,10 @@ import {
     SaveButton,
     Breadcrumb,
     PageHeader,
+    ListButtonProps,
+    RefreshButtonProps,
+    DeleteButtonProps,
+    SaveButtonProps,
 } from "@components";
 import { EditProps } from "../types";
 
@@ -32,11 +36,11 @@ import { EditProps } from "../types";
  */
 export const Edit: React.FC<EditProps> = ({
     title,
-    saveButtonProps,
+    saveButtonProps: saveButtonPropsFromProps,
     mutationMode: mutationModeProp,
     recordItemId,
     children,
-    deleteButtonProps,
+    deleteButtonProps: deleteButtonPropsFromProps,
     canDelete,
     resource: resourceFromProps,
     isLoading = false,
@@ -80,65 +84,70 @@ export const Edit: React.FC<EditProps> = ({
             ? globalBreadcrumb
             : breadcrumbFromProps;
 
+    const hasList = resource?.list && !recordItemId;
     const isDeleteButtonVisible =
         canDelete ??
         ((resource?.meta?.canDelete ?? resource?.canDelete) ||
-            deleteButtonProps);
+            deleteButtonPropsFromProps);
+
+    const listButtonProps: ListButtonProps | undefined = hasList
+        ? {
+              ...(isLoading ? { disabled: true } : {}),
+              resource:
+                  routerType === "legacy"
+                      ? resource?.route
+                      : resource?.identifier ?? resource?.name,
+          }
+        : undefined;
+
+    const refreshButtonProps: RefreshButtonProps = {
+        ...(isLoading ? { disabled: true } : {}),
+        resource:
+            routerType === "legacy"
+                ? resource?.route
+                : resource?.identifier ?? resource?.name,
+        recordItemId: id,
+        dataProviderName,
+    };
+
+    const deleteButtonProps: DeleteButtonProps | undefined =
+        isDeleteButtonVisible
+            ? {
+                  ...(isLoading ? { disabled: true } : {}),
+                  resource:
+                      routerType === "legacy"
+                          ? resource?.route
+                          : resource?.identifier ?? resource?.name,
+                  mutationMode,
+                  onSuccess: () => {
+                      if (routerType === "legacy") {
+                          legacyGoList(resource?.route ?? resource?.name ?? "");
+                      } else {
+                          go({ to: goListPath });
+                      }
+                  },
+                  recordItemId: id,
+                  dataProviderName,
+                  ...deleteButtonPropsFromProps,
+              }
+            : undefined;
+
+    const saveButtonProps: SaveButtonProps = {
+        ...(isLoading ? { disabled: true } : {}),
+        ...saveButtonPropsFromProps,
+    };
 
     const defaultHeaderButtons = (
         <>
-            {!recordItemId && (
-                <ListButton
-                    {...(isLoading ? { disabled: true } : {})}
-                    resource={
-                        routerType === "legacy"
-                            ? resource?.route
-                            : resource?.identifier ?? resource?.name
-                    }
-                />
-            )}
-            <RefreshButton
-                {...(isLoading ? { disabled: true } : {})}
-                resource={
-                    routerType === "legacy"
-                        ? resource?.route
-                        : resource?.identifier ?? resource?.name
-                }
-                recordItemId={id}
-                dataProviderName={dataProviderName}
-            />
+            {hasList && <ListButton {...listButtonProps} />}
+            <RefreshButton {...refreshButtonProps} />
         </>
     );
 
     const defaultFooterButtons = (
         <>
-            {isDeleteButtonVisible && (
-                <DeleteButton
-                    {...(isLoading ? { disabled: true } : {})}
-                    resource={
-                        routerType === "legacy"
-                            ? resource?.route
-                            : resource?.identifier ?? resource?.name
-                    }
-                    mutationMode={mutationMode}
-                    onSuccess={() => {
-                        if (routerType === "legacy") {
-                            legacyGoList(
-                                resource?.route ?? resource?.name ?? "",
-                            );
-                        } else {
-                            go({ to: goListPath });
-                        }
-                    }}
-                    recordItemId={id}
-                    dataProviderName={dataProviderName}
-                    {...deleteButtonProps}
-                />
-            )}
-            <SaveButton
-                {...(isLoading ? { disabled: true } : {})}
-                {...saveButtonProps}
-            />
+            {isDeleteButtonVisible && <DeleteButton {...deleteButtonProps} />}
+            <SaveButton {...saveButtonProps} />
         </>
     );
 
@@ -173,6 +182,8 @@ export const Edit: React.FC<EditProps> = ({
                             ? typeof headerButtons === "function"
                                 ? headerButtons({
                                       defaultButtons: defaultHeaderButtons,
+                                      listButtonProps,
+                                      refreshButtonProps,
                                   })
                                 : headerButtons
                             : defaultHeaderButtons}
@@ -205,6 +216,8 @@ export const Edit: React.FC<EditProps> = ({
                                         ? footerButtons({
                                               defaultButtons:
                                                   defaultFooterButtons,
+                                              deleteButtonProps,
+                                              saveButtonProps,
                                           })
                                         : footerButtons
                                     : defaultFooterButtons}

package/src/components/crud/list/index.tsx

@@ -8,7 +8,12 @@ import {
     useResource,
 } from "@refinedev/core";
 
-import { Breadcrumb, CreateButton, PageHeader } from "@components";
+import {
+    Breadcrumb,
+    CreateButton,
+    CreateButtonProps,
+    PageHeader,
+} from "@components";
 import { ListProps } from "../types";
 
 /**
@@ -21,7 +26,7 @@ export const List: React.FC<ListProps> = ({
     canCreate,
     title,
     children,
-    createButtonProps,
+    createButtonProps: createButtonPropsFromProps,
     resource: resourceFromProps,
     wrapperProps,
     contentProps,
@@ -40,23 +45,28 @@ export const List: React.FC<ListProps> = ({
 
     const isCreateButtonVisible =
         canCreate ??
-        ((resource?.canCreate ?? !!resource?.create) || createButtonProps);
+        ((resource?.canCreate ?? !!resource?.create) ||
+            createButtonPropsFromProps);
 
     const breadcrumb =
         typeof breadcrumbFromProps === "undefined"
             ? globalBreadcrumb
             : breadcrumbFromProps;
 
+    const createButtonProps: CreateButtonProps | undefined =
+        isCreateButtonVisible
+            ? {
+                  size: "middle",
+                  resource:
+                      routerType === "legacy"
+                          ? resource?.route
+                          : resource?.identifier ?? resource?.name,
+                  ...createButtonPropsFromProps,
+              }
+            : undefined;
+
     const defaultExtra = isCreateButtonVisible ? (
-        <CreateButton
-            size="middle"
-            resource={
-                routerType === "legacy"
-                    ? resource?.route
-                    : resource?.identifier ?? resource?.name
-            }
-            {...createButtonProps}
-        />
+        <CreateButton {...createButtonProps} />
     ) : null;
 
     return (
@@ -82,6 +92,7 @@ export const List: React.FC<ListProps> = ({
                             {typeof headerButtons === "function"
                                 ? headerButtons({
                                       defaultButtons: defaultExtra,
+                                      createButtonProps,
                                   })
                                 : headerButtons}
                         </Space>

package/src/components/crud/show/index.tsx

@@ -19,6 +19,10 @@ import {
     ListButton,
     Breadcrumb,
     PageHeader,
+    ListButtonProps,
+    EditButtonProps,
+    DeleteButtonProps,
+    RefreshButtonProps,
 } from "@components";
 import { ShowProps } from "../types";
 
@@ -74,65 +78,66 @@ export const Show: React.FC<ShowProps> = ({
             ? globalBreadcrumb
             : breadcrumbFromProps;
 
+    const hasList = resource?.list && !recordItemId;
     const isDeleteButtonVisible =
         canDelete ?? resource?.meta?.canDelete ?? resource?.canDelete;
     const isEditButtonVisible =
         canEdit ?? resource?.canEdit ?? !!resource?.edit;
 
+    const listButtonProps: ListButtonProps | undefined = hasList
+        ? {
+              resource:
+                  routerType === "legacy"
+                      ? resource?.route
+                      : resource?.identifier ?? resource?.name,
+          }
+        : undefined;
+    const editButtonProps: EditButtonProps | undefined = isEditButtonVisible
+        ? {
+              ...(isLoading ? { disabled: true } : {}),
+              type: "primary",
+              resource:
+                  routerType === "legacy"
+                      ? resource?.route
+                      : resource?.identifier ?? resource?.name,
+              recordItemId: id,
+          }
+        : undefined;
+    const deleteButtonProps: DeleteButtonProps | undefined =
+        isDeleteButtonVisible
+            ? {
+                  ...(isLoading ? { disabled: true } : {}),
+                  resource:
+                      routerType === "legacy"
+                          ? resource?.route
+                          : resource?.identifier ?? resource?.name,
+                  recordItemId: id,
+                  onSuccess: () => {
+                      if (routerType === "legacy") {
+                          legacyGoList(resource?.route ?? resource?.name ?? "");
+                      } else {
+                          go({ to: goListPath });
+                      }
+                  },
+                  dataProviderName,
+              }
+            : undefined;
+    const refreshButtonProps: RefreshButtonProps = {
+        ...(isLoading ? { disabled: true } : {}),
+        resource:
+            routerType === "legacy"
+                ? resource?.route
+                : resource?.identifier ?? resource?.name,
+        recordItemId: id,
+        dataProviderName,
+    };
+
     const defaultHeaderButtons = (
         <>
-            {!recordItemId && (
-                <ListButton
-                    resource={
-                        routerType === "legacy"
-                            ? resource?.route
-                            : resource?.identifier ?? resource?.name
-                    }
-                />
-            )}
-            {isEditButtonVisible && (
-                <EditButton
-                    {...(isLoading ? { disabled: true } : {})}
-                    type="primary"
-                    resource={
-                        routerType === "legacy"
-                            ? resource?.route
-                            : resource?.identifier ?? resource?.name
-                    }
-                    recordItemId={id}
-                />
-            )}
-            {isDeleteButtonVisible && (
-                <DeleteButton
-                    {...(isLoading ? { disabled: true } : {})}
-                    resource={
-                        routerType === "legacy"
-                            ? resource?.route
-                            : resource?.identifier ?? resource?.name
-                    }
-                    recordItemId={id}
-                    onSuccess={() => {
-                        if (routerType === "legacy") {
-                            legacyGoList(
-                                resource?.route ?? resource?.name ?? "",
-                            );
-                        } else {
-                            go({ to: goListPath });
-                        }
-                    }}
-                    dataProviderName={dataProviderName}
-                />
-            )}
-            <RefreshButton
-                {...(isLoading ? { disabled: true } : {})}
-                resource={
-                    routerType === "legacy"
-                        ? resource?.route
-                        : resource?.identifier ?? resource?.name
-                }
-                recordItemId={id}
-                dataProviderName={dataProviderName}
-            />
+            {hasList && <ListButton {...listButtonProps} />}
+            {isEditButtonVisible && <EditButton {...editButtonProps} />}
+            {isDeleteButtonVisible && <DeleteButton {...deleteButtonProps} />}
+            <RefreshButton {...refreshButtonProps} />
         </>
     );
 
@@ -171,6 +176,10 @@ export const Show: React.FC<ShowProps> = ({
                             ? typeof headerButtons === "function"
                                 ? headerButtons({
                                       defaultButtons: defaultHeaderButtons,
+                                      deleteButtonProps,
+                                      editButtonProps,
+                                      listButtonProps,
+                                      refreshButtonProps,
                                   })
                                 : headerButtons
                             : defaultHeaderButtons}