@refinedev/antd 5.37.5 → 5.38.0

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button, Popconfirm } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import {
-  useDelete,
-  useTranslate,
-  useMutationMode,
-  useCan,
-  useResource,
-  pickNotDeprecated,
-  useWarnAboutChange,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useDeleteButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { DeleteButtonProps } from "../types";
+import type { DeleteButtonProps } from "../types";
 
 /**
  * `<DeleteButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} and {@link https://ant.design/components/button/ `<Popconfirm>`} components.
@@ -44,101 +35,55 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
   invalidates,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const translate = useTranslate();
-
-  const { id, resource, identifier } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { mutationMode: mutationModeContext } = useMutationMode();
-
-  const mutationMode = mutationModeProp ?? mutationModeContext;
-
-  const { mutate, isLoading, variables } = useDelete();
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "delete",
-    params: { id: recordItemId ?? id, resource },
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
+  const {
+    title,
+    label,
+    hidden,
+    disabled,
+    loading,
+    confirmTitle: defaultConfirmTitle,
+    confirmOkLabel: defaultConfirmOkLabel,
+    cancelLabel: defaultCancelLabel,
+    onConfirm,
+  } = useDeleteButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    dataProviderName,
+    invalidates,
+    meta,
+    onSuccess,
+    mutationMode: mutationModeProp,
+    errorNotification,
+    successNotification,
+    accessControl,
   });
 
-  const disabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const { setWarnWhen } = useWarnAboutChange();
-
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (hidden) return null;
 
   return (
     <Popconfirm
       key="delete"
-      okText={confirmOkText ?? translate("buttons.delete", "Delete")}
-      cancelText={confirmCancelText ?? translate("buttons.cancel", "Cancel")}
+      okText={confirmOkText ?? defaultConfirmOkLabel}
+      cancelText={confirmCancelText ?? defaultCancelLabel}
       okType="danger"
-      title={confirmTitle ?? translate("buttons.confirm", "Are you sure?")}
-      okButtonProps={{ disabled: isLoading }}
-      onConfirm={(): void => {
-        if ((recordItemId ?? id) && identifier) {
-          setWarnWhen(false);
-          mutate(
-            {
-              id: recordItemId ?? id ?? "",
-              resource: identifier,
-              mutationMode,
-              successNotification,
-              errorNotification,
-              meta: pickNotDeprecated(meta, metaData),
-              metaData: pickNotDeprecated(meta, metaData),
-              dataProviderName,
-              invalidates,
-            },
-            {
-              onSuccess: (value) => {
-                onSuccess?.(value);
-              },
-            },
-          );
-        }
-      }}
+      title={confirmTitle ?? defaultConfirmTitle}
+      okButtonProps={{ disabled: loading }}
+      onConfirm={onConfirm}
       disabled={
-        typeof rest?.disabled !== "undefined"
-          ? rest.disabled
-          : data?.can === false
+        typeof rest?.disabled !== "undefined" ? rest.disabled : disabled
       }
     >
       <Button
         danger
-        loading={(recordItemId ?? id) === variables?.id && isLoading}
+        loading={loading}
         icon={<DeleteOutlined />}
-        title={disabledTitle()}
-        disabled={data?.can === false}
+        title={title}
+        disabled={disabled}
         data-testid={RefineButtonTestIds.DeleteButton}
         className={RefineButtonClassNames.DeleteButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.delete", "Delete"))}
+        {!hideText && (children ?? label)}
       </Button>
     </Popconfirm>
   );

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

@@ -1,16 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EditOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useEditButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -36,64 +27,21 @@ export const EditButton: React.FC<EditButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const translate = useTranslate();
-
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const { editUrl: generateEditUrl } = useNavigation();
-
-  const { id, resource } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "edit",
-    params: { id: recordItemId ?? id, resource },
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
+  const { to, label, title, hidden, disabled, LinkComponent } = useEditButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    meta,
+    accessControl,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const editUrl =
-    resource && (recordItemId ?? id)
-      ? generateEditUrl(resource, recordItemId! ?? id!, meta)
-      : "";
-
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (hidden) return null;
 
   return (
-    <ActiveLink
-      to={editUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (disabled) {
           e.preventDefault();
           return;
         }
@@ -105,14 +53,14 @@ export const EditButton: React.FC<EditButtonProps> = ({
     >
       <Button
         icon={<EditOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={disabled}
+        title={title}
         data-testid={RefineButtonTestIds.EditButton}
         className={RefineButtonClassNames.EditButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.edit", "Edit"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button } from "antd";
 import { ExportOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useExportButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -20,7 +20,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
   children,
   ...rest
 }) => {
-  const translate = useTranslate();
+  const { label } = useExportButton();
 
   return (
     <Button
@@ -30,7 +30,7 @@ export const ExportButton: React.FC<ExportButtonProps> = ({
       className={RefineButtonClassNames.ExportButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.export", "Export"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Upload } from "antd";
 import { ImportOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useImportButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -21,8 +21,9 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
   buttonProps,
   hideText = false,
   children,
+  loading,
 }) => {
-  const translate = useTranslate();
+  const { label } = useImportButton();
 
   return (
     <Upload {...uploadProps}>
@@ -30,9 +31,10 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
         icon={<ImportOutlined />}
         data-testid={RefineButtonTestIds.ImportButton}
         className={RefineButtonClassNames.ImportButton}
+        loading={loading}
         {...buttonProps}
       >
-        {!hideText && (children ?? translate("buttons.import", "Import"))}
+        {!hideText && (children ?? label)}
       </Button>
     </Upload>
   );

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

@@ -1,18 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { BarsOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useUserFriendlyName,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  pickNotDeprecated,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useListButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -37,63 +26,20 @@ export const ListButton: React.FC<ListButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const { listUrl: generateListUrl } = useNavigation();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-  const getUserFriendlyName = useUserFriendlyName();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const translate = useTranslate();
-
-  const { resource, identifier } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "list",
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
-    params: {
-      resource,
-    },
+  const { to, label, title, hidden, disabled, LinkComponent } = useListButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    accessControl,
+    meta,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const listUrl = resource ? generateListUrl(resource, meta) : "";
-
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (hidden) return null;
 
   return (
-    <ActiveLink
-      to={listUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (disabled) {
           e.preventDefault();
           return;
         }
@@ -105,32 +51,14 @@ export const ListButton: React.FC<ListButtonProps> = ({
     >
       <Button
         icon={<BarsOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={disabled}
+        title={title}
         data-testid={RefineButtonTestIds.ListButton}
         className={RefineButtonClassNames.ListButton}
         {...rest}
       >
-        {!hideText &&
-          (children ??
-            translate(
-              `${
-                identifier ??
-                resourceNameFromProps ??
-                propResourceNameOrRouteName
-              }.titles.list`,
-              getUserFriendlyName(
-                resource?.meta?.label ??
-                  resource?.label ??
-                  identifier ??
-                  pickNotDeprecated(
-                    resourceNameFromProps,
-                    propResourceNameOrRouteName,
-                  ),
-                "plural",
-              ),
-            ))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

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

@@ -1,13 +1,7 @@
 import React from "react";
 import { Button } from "antd";
 import { RedoOutlined } from "@ant-design/icons";
-import {
-  useTranslate,
-  useResource,
-  useInvalidate,
-  queryKeys,
-  pickDataProvider,
-} from "@refinedev/core";
+import { useRefreshButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -15,8 +9,6 @@ import {
 
 import { RefreshButtonProps } from "../types";
 
-import { useQueryClient } from "@tanstack/react-query";
-
 /**
  * `<RefreshButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button>`} component
  * to update the data shown on the page via the {@link https://refine.dev/docs/api-reference/core/hooks/invalidate/useInvalidate `useInvalidate`} hook.
@@ -30,47 +22,25 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
   hideText = false,
   dataProviderName,
   children,
-  onClick,
   meta: _meta,
   metaData: _metaData,
   ...rest
 }) => {
-  const translate = useTranslate();
-
-  const queryClient = useQueryClient();
-  const invalidates = useInvalidate();
-
-  const { resources, identifier, id } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const isInvalidating = !!queryClient.isFetching({
-    queryKey: queryKeys(
-      identifier,
-      pickDataProvider(identifier, dataProviderName, resources),
-    ).detail(recordItemId ?? id),
+  const { onClick, label, loading } = useRefreshButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    dataProviderName,
   });
 
-  const handleInvalidate = () => {
-    invalidates({
-      id: recordItemId ?? id,
-      invalidates: ["detail"],
-      dataProviderName,
-      resource: identifier,
-    });
-  };
-
   return (
     <Button
-      onClick={(e) => {
-        onClick ? onClick(e) : handleInvalidate();
-      }}
-      icon={<RedoOutlined spin={isInvalidating} />}
+      onClick={onClick}
+      icon={<RedoOutlined spin={loading} />}
       data-testid={RefineButtonTestIds.RefreshButton}
       className={RefineButtonClassNames.RefreshButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.refresh", "Refresh"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button } from "antd";
 import { SaveOutlined } from "@ant-design/icons";
-import { useTranslate } from "@refinedev/core";
+import { useSaveButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -20,7 +20,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
   children,
   ...rest
 }) => {
-  const translate = useTranslate();
+  const { label } = useSaveButton();
 
   return (
     <Button
@@ -30,7 +30,7 @@ export const SaveButton: React.FC<SaveButtonProps> = ({
       className={RefineButtonClassNames.SaveButton}
       {...rest}
     >
-      {!hideText && (children ?? translate("buttons.save", "Save"))}
+      {!hideText && (children ?? label)}
     </Button>
   );
 };

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

@@ -1,16 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { EyeOutlined } from "@ant-design/icons";
-import {
-  useCan,
-  useNavigation,
-  useTranslate,
-  useResource,
-  useRouterContext,
-  useRouterType,
-  useLink,
-  AccessControlContext,
-} from "@refinedev/core";
+import { useShowButton } from "@refinedev/core";
 import {
   RefineButtonClassNames,
   RefineButtonTestIds,
@@ -36,63 +27,21 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
   onClick,
   ...rest
 }) => {
-  const accessControlContext = useContext(AccessControlContext);
-
-  const accessControlEnabled =
-    accessControl?.enabled ??
-    accessControlContext.options.buttons.enableAccessControl;
-
-  const hideIfUnauthorized =
-    accessControl?.hideIfUnauthorized ??
-    accessControlContext.options.buttons.hideIfUnauthorized;
-
-  const { showUrl: generateShowUrl } = useNavigation();
-  const routerType = useRouterType();
-  const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
-  const translate = useTranslate();
-
-  const { id, resource } = useResource(
-    resourceNameFromProps ?? propResourceNameOrRouteName,
-  );
-
-  const { data } = useCan({
-    resource: resource?.name,
-    action: "show",
-    params: { id: recordItemId ?? id, resource },
-    queryOptions: {
-      enabled: accessControlEnabled,
-    },
+  const { to, label, title, hidden, disabled, LinkComponent } = useShowButton({
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+    id: recordItemId,
+    accessControl,
+    meta,
   });
 
-  const createButtonDisabledTitle = () => {
-    if (data?.can) return "";
-    if (data?.reason) return data.reason;
-
-    return translate(
-      "buttons.notAccessTitle",
-      "You don't have permission to access",
-    );
-  };
-
-  const showUrl =
-    resource && (recordItemId || id)
-      ? generateShowUrl(resource, recordItemId! ?? id!, meta)
-      : "";
-
-  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-    return null;
-  }
+  if (hidden) return null;
 
   return (
-    <ActiveLink
-      to={showUrl}
+    <LinkComponent
+      to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (data?.can === false) {
+        if (disabled) {
           e.preventDefault();
           return;
         }
@@ -104,14 +53,14 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
     >
       <Button
         icon={<EyeOutlined />}
-        disabled={data?.can === false}
-        title={createButtonDisabledTitle()}
+        disabled={disabled}
+        title={title}
         data-testid={RefineButtonTestIds.ShowButton}
         className={RefineButtonClassNames.ShowButton}
         {...rest}
       >
-        {!hideText && (children ?? translate("buttons.show", "Show"))}
+        {!hideText && (children ?? label)}
       </Button>
-    </ActiveLink>
+    </LinkComponent>
   );
 };

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -112,7 +112,13 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
           name="email"
           label={translate("pages.forgotPassword.fields.email", "Email")}
           rules={[
-            { required: true },
+            {
+              required: true,
+              message: translate(
+                "pages.forgotPassword.errors.requiredEmail",
+                "Email is required",
+              ),
+            },
             {
               type: "email",
               message: translate(