@refinedev/antd 5.37.5 → 5.37.6

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/table/components/filterDropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { type ReactNode, useState } from "react";
 import { Button, Space } from "antd";
 import type { FilterDropdownProps as AntdFilterDropdownProps } from "antd/lib/table/interface";
 import dayjs from "dayjs";
@@ -79,7 +79,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
 
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
+      return React.cloneElement(child as React.ReactElement, {
         onChange,
         value: mappedValue(value),
       });

package/src/definitions/table/index.ts

@@ -8,7 +8,16 @@ import {
   ConditionalFilter,
   LogicalFilter,
 } from "@refinedev/core";
-import { SortOrder, SorterResult } from "antd/lib/table/interface";
+import { TableProps } from "antd";
+
+export type FilterValue = Parameters<
+  NonNullable<TableProps["onChange"]>
+>[1][string];
+export type SortOrder = NonNullable<TableProps["sortDirections"]>[number];
+export type SorterResult = Exclude<
+  Parameters<NonNullable<TableProps["onChange"]>>[2],
+  any[]
+>;
 
 export const getDefaultSortOrder = (
   columnName: string,
@@ -35,7 +44,7 @@ export const getDefaultFilter = (
 };
 
 export const mapAntdSorterToCrudSorting = (
-  sorter: SorterResult<any> | SorterResult<any>[],
+  sorter: SorterResult | SorterResult[],
 ): CrudSorting => {
   const crudSorting: CrudSorting = [];
   if (Array.isArray(sorter)) {
@@ -77,7 +86,10 @@ export const mapAntdSorterToCrudSorting = (
 export const mapAntdFilterToCrudFilter = (
   tableFilters: Record<
     string,
-    (string | number | boolean) | (string | number | boolean)[] | null
+    | FilterValue
+    | (string | number | boolean)
+    | (string | number | boolean)[]
+    | null
   >,
   prevFilters: CrudFilters,
   initialFilters?: CrudFilters,

package/src/hooks/form/useForm.ts

@@ -279,7 +279,9 @@ export const useForm = <
 
       const onFinishFromProps = autoSave?.onFinish ?? ((values) => values);
 
-      return onFinishAutoSave(onFinishFromProps(allValues));
+      return onFinishAutoSave(onFinishFromProps(allValues)).catch(
+        (error) => error,
+      );
     }
 
     return changeValues;

package/src/hooks/table/useTable/useTable.ts

@@ -2,8 +2,6 @@ import React, { Children, createElement, Fragment } from "react";
 import { Grid, FormProps, Form, TablePaginationConfig, TableProps } from "antd";
 import { useForm as useFormSF } from "sunflower-antd";
 
-import { SorterResult } from "antd/lib/table/interface";
-
 import {
   useLiveMode,
   BaseRecord,
@@ -20,6 +18,7 @@ import {
   mapAntdFilterToCrudFilter,
 } from "@definitions/table";
 import { PaginationLink } from "./paginationLink";
+import { FilterValue, SorterResult } from "../../../definitions/table";
 
 export type useTableProps<TQueryFnData, TError, TSearchVariables, TData> =
   useTablePropsCore<TQueryFnData, TError, TData> & {
@@ -143,11 +142,8 @@ export const useTable = <
 
   const onChange = (
     paginationState: TablePaginationConfig,
-    tableFilters: Record<
-      string,
-      (string | number | boolean) | (string | number | boolean)[] | null
-    >,
-    sorter: SorterResult<any> | SorterResult<any>[],
+    tableFilters: Record<string, FilterValue | null>,
+    sorter: SorterResult | SorterResult[],
   ) => {
     if (tableFilters && Object.keys(tableFilters).length > 0) {
       // Map Antd:Filter -> refine:CrudFilter

package/tsconfig.json

@@ -23,6 +23,10 @@
       "@definitions/*": ["src/definitions/*"],
       "@definitions": ["src/definitions"]
     },
-    "typeRoots": ["./src/types", "../../node_modules/@types"]
+    "typeRoots": [
+      "./src/types",
+      "./node_modules/@types",
+      "../../node_modules/@types"
+    ]
   }
 }