@refinedev/antd 5.37.4 → 5.37.6

package/src/components/autoSaveIndicator/index.tsx

@@ -1,85 +1,85 @@
 import React from "react";
 import {
-    AutoSaveIndicatorProps,
-    useTranslate,
-    AutoSaveIndicator as AutoSaveIndicatorCore,
+  AutoSaveIndicatorProps,
+  useTranslate,
+  AutoSaveIndicator as AutoSaveIndicatorCore,
 } from "@refinedev/core";
 import { Typography, theme } from "antd";
 import {
-    EllipsisOutlined,
-    SyncOutlined,
-    CheckCircleOutlined,
-    ExclamationCircleOutlined,
+  EllipsisOutlined,
+  SyncOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
 } from "@ant-design/icons";
 
 export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
-    status,
-    elements: {
-        success = (
-            <Message
-                key="autoSave.success"
-                defaultMessage="saved"
-                icon={<CheckCircleOutlined />}
-            />
-        ),
-        error = (
-            <Message
-                key="autoSave.error"
-                defaultMessage="auto save failure"
-                icon={<ExclamationCircleOutlined />}
-            />
-        ),
-        loading = (
-            <Message
-                key="autoSave.loading"
-                defaultMessage="saving..."
-                icon={<SyncOutlined />}
-            />
-        ),
-        idle = (
-            <Message
-                key="autoSave.idle"
-                defaultMessage="waiting for changes"
-                icon={<EllipsisOutlined />}
-            />
-        ),
-    } = {},
+  status,
+  elements: {
+    success = (
+      <Message
+        key="autoSave.success"
+        defaultMessage="saved"
+        icon={<CheckCircleOutlined />}
+      />
+    ),
+    error = (
+      <Message
+        key="autoSave.error"
+        defaultMessage="auto save failure"
+        icon={<ExclamationCircleOutlined />}
+      />
+    ),
+    loading = (
+      <Message
+        key="autoSave.loading"
+        defaultMessage="saving..."
+        icon={<SyncOutlined />}
+      />
+    ),
+    idle = (
+      <Message
+        key="autoSave.idle"
+        defaultMessage="waiting for changes"
+        icon={<EllipsisOutlined />}
+      />
+    ),
+  } = {},
 }) => {
-    return (
-        <AutoSaveIndicatorCore
-            status={status}
-            elements={{
-                success,
-                error,
-                loading,
-                idle,
-            }}
-        />
-    );
+  return (
+    <AutoSaveIndicatorCore
+      status={status}
+      elements={{
+        success,
+        error,
+        loading,
+        idle,
+      }}
+    />
+  );
 };
 
 const Message = ({
-    key,
-    defaultMessage,
-    icon,
+  key,
+  defaultMessage,
+  icon,
 }: {
-    key: string;
-    defaultMessage: string;
-    icon: React.ReactNode;
+  key: string;
+  defaultMessage: string;
+  icon: React.ReactNode;
 }) => {
-    const translate = useTranslate();
-    const { token } = theme.useToken();
+  const translate = useTranslate();
+  const { token } = theme.useToken();
 
-    return (
-        <Typography.Text
-            style={{
-                marginRight: 5,
-                color: token.colorTextTertiary,
-                fontSize: ".8rem",
-            }}
-        >
-            {translate(key, defaultMessage)}
-            <span style={{ marginLeft: ".2rem" }}>{icon}</span>
-        </Typography.Text>
-    );
+  return (
+    <Typography.Text
+      style={{
+        marginRight: 5,
+        color: token.colorTextTertiary,
+        fontSize: ".8rem",
+      }}
+    >
+      {translate(key, defaultMessage)}
+      <span style={{ marginLeft: ".2rem" }}>{icon}</span>
+    </Typography.Text>
+  );
 };

package/src/components/breadcrumb/index.tsx

@@ -1,87 +1,85 @@
 import React from "react";
 import {
-    useBreadcrumb,
-    useLink,
-    useRefineContext,
-    useRouterContext,
-    useRouterType,
-    useResource,
-    matchResourceFromRoute,
+  useBreadcrumb,
+  useLink,
+  useRefineContext,
+  useRouterContext,
+  useRouterType,
+  useResource,
+  matchResourceFromRoute,
 } from "@refinedev/core";
 import { RefineBreadcrumbProps } from "@refinedev/ui-types";
 
 import {
-    Breadcrumb as AntdBreadcrumb,
-    BreadcrumbProps as AntdBreadcrumbProps,
+  Breadcrumb as AntdBreadcrumb,
+  BreadcrumbProps as AntdBreadcrumbProps,
 } from "antd";
 import { HomeOutlined } from "@ant-design/icons";
 
 export type BreadcrumbProps = RefineBreadcrumbProps<AntdBreadcrumbProps>;
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({
-    breadcrumbProps,
-    showHome = true,
-    hideIcons = false,
-    meta,
+  breadcrumbProps,
+  showHome = true,
+  hideIcons = false,
+  meta,
 }) => {
-    const routerType = useRouterType();
-    const { breadcrumbs } = useBreadcrumb({
-        meta,
-    });
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
-    const { hasDashboard } = useRefineContext();
+  const routerType = useRouterType();
+  const { breadcrumbs } = useBreadcrumb({
+    meta,
+  });
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
+  const { hasDashboard } = useRefineContext();
 
-    const { resources } = useResource();
+  const { resources } = useResource();
 
-    const rootRouteResource = matchResourceFromRoute("/", resources);
+  const rootRouteResource = matchResourceFromRoute("/", resources);
 
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    if (breadcrumbs.length === 1) {
-        return null;
-    }
+  if (breadcrumbs.length === 1) {
+    return null;
+  }
 
-    const breadCrumbItems = breadcrumbs.map(({ label, icon, href }) => ({
-        key: `breadcrumb-item-${label}`,
-        title: (
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: 4,
-                }}
-            >
-                {!hideIcons && icon}
-                {href ? (
-                    <ActiveLink to={href}>{label}</ActiveLink>
-                ) : (
-                    <span>{label}</span>
-                )}
-            </div>
-        ),
-    }));
+  const breadCrumbItems = breadcrumbs.map(({ label, icon, href }) => ({
+    key: `breadcrumb-item-${label}`,
+    title: (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 4,
+        }}
+      >
+        {!hideIcons && icon}
+        {href ? (
+          <ActiveLink to={href}>{label}</ActiveLink>
+        ) : (
+          <span>{label}</span>
+        )}
+      </div>
+    ),
+  }));
 
-    const getBreadcrumbItems = () => {
-        if (showHome && (hasDashboard || rootRouteResource.found)) {
-            return [
-                {
-                    key: "breadcrumb-item-home",
-                    title: (
-                        <ActiveLink to="/">
-                            {rootRouteResource?.resource?.meta?.icon ?? (
-                                <HomeOutlined />
-                            )}
-                        </ActiveLink>
-                    ),
-                },
-                ...breadCrumbItems,
-            ];
-        }
+  const getBreadcrumbItems = () => {
+    if (showHome && (hasDashboard || rootRouteResource.found)) {
+      return [
+        {
+          key: "breadcrumb-item-home",
+          title: (
+            <ActiveLink to="/">
+              {rootRouteResource?.resource?.meta?.icon ?? <HomeOutlined />}
+            </ActiveLink>
+          ),
+        },
+        ...breadCrumbItems,
+      ];
+    }
 
-        return breadCrumbItems;
-    };
+    return breadCrumbItems;
+  };
 
-    return <AntdBreadcrumb items={getBreadcrumbItems()} {...breadcrumbProps} />;
+  return <AntdBreadcrumb items={getBreadcrumbItems()} {...breadcrumbProps} />;
 };

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
+import { useCloneButton } from "@refinedev/core";
 import {
-    useCan,
-    useNavigation,
-    useTranslate,
-    useResource,
-    useRouterContext,
-    useRouterType,
-    useLink,
-    AccessControlContext,
-} from "@refinedev/core";
-import {
-    RefineButtonTestIds,
-    RefineButtonClassNames,
+  RefineButtonTestIds,
+  RefineButtonClassNames,
 } from "@refinedev/ui-types";
 
-import { CloneButtonProps } from "../types";
+import type { CloneButtonProps } from "../types";
 
 /**
  * `<CloneButton>` uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
@@ -26,92 +17,50 @@ import { CloneButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/clone-button} for more details.
  */
 export const CloneButton: React.FC<CloneButtonProps> = ({
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    resource: resourceNameFromProps,
-    recordItemId,
-    hideText = false,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  resource: resourceNameFromProps,
+  recordItemId,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const { to, LinkComponent, label, disabled, hidden, title } = useCloneButton({
+    id: recordItemId,
+    resource: resourceNameFromProps ?? propResourceNameOrRouteName,
     accessControl,
     meta,
-    children,
-    onClick,
-    ...rest
-}) => {
-    const accessControlContext = useContext(AccessControlContext);
-
-    const accessControlEnabled =
-        accessControl?.enabled ??
-        accessControlContext.options.buttons.enableAccessControl;
-
-    const hideIfUnauthorized =
-        accessControl?.hideIfUnauthorized ??
-        accessControlContext.options.buttons.hideIfUnauthorized;
-
-    const { cloneUrl: generateCloneUrl } = 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: "create",
-        params: { id: recordItemId ?? id, resource },
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-    });
-
-    const createButtonDisabledTitle = () => {
-        if (data?.can) return "";
-        else if (data?.reason) return data.reason;
-        else
-            return translate(
-                "buttons.notAccessTitle",
-                "You don't have permission to access",
-            );
-    };
-
-    const cloneUrl =
-        resource && (recordItemId || id)
-            ? generateCloneUrl(resource, recordItemId! ?? id!, meta)
-            : "";
+  });
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <ActiveLink
-            to={cloneUrl}
-            replace={false}
-            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-                if (data?.can === false) {
-                    e.preventDefault();
-                    return;
-                }
-                if (onClick) {
-                    e.preventDefault();
-                    onClick(e);
-                }
-            }}
-        >
-            <Button
-                icon={<PlusSquareOutlined />}
-                disabled={data?.can === false}
-                title={createButtonDisabledTitle()}
-                data-testid={RefineButtonTestIds.CloneButton}
-                className={RefineButtonClassNames.CloneButton}
-                {...rest}
-            >
-                {!hideText && (children ?? translate("buttons.clone", "Clone"))}
-            </Button>
-        </ActiveLink>
-    );
+  return (
+    <LinkComponent
+      to={to}
+      replace={false}
+      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
+      }}
+    >
+      <Button
+        icon={<PlusSquareOutlined />}
+        disabled={disabled}
+        title={title}
+        data-testid={RefineButtonTestIds.CloneButton}
+        className={RefineButtonClassNames.CloneButton}
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </LinkComponent>
+  );
 };

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

@@ -1,22 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
+import { useCreateButton } from "@refinedev/core";
 import {
-    useNavigation,
-    useTranslate,
-    useCan,
-    useResource,
-    useRouterContext,
-    useRouterType,
-    useLink,
-    AccessControlContext,
-} from "@refinedev/core";
-import {
-    RefineButtonClassNames,
-    RefineButtonTestIds,
+  RefineButtonClassNames,
+  RefineButtonTestIds,
 } from "@refinedev/ui-types";
 
-import { CreateButtonProps } from "../types";
+import type { CreateButtonProps } from "../types";
 
 /**
  * <CreateButton> uses Ant Design's {@link https://ant.design/components/button/ `<Button> component`}.
@@ -26,92 +17,51 @@ import { CreateButtonProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/create-button} for more details.
  */
 export const CreateButton: React.FC<CreateButtonProps> = ({
-    resource: resourceNameFromProps,
-    resourceNameOrRouteName: propResourceNameOrRouteName,
-    hideText = false,
-    accessControl,
-    meta,
-    children,
-    onClick,
-    ...rest
+  resource: resourceNameFromProps,
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  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 { createUrl: generateCreateUrl } = useNavigation();
-
-    const { resource } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
-
-    const { data } = useCan({
-        resource: resource?.name,
-        action: "create",
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-        params: {
-            resource,
-        },
-    });
-
-    const createButtonDisabledTitle = () => {
-        if (data?.can) return "";
-        else if (data?.reason) return data.reason;
-        else
-            return translate(
-                "buttons.notAccessTitle",
-                "You don't have permission to access",
-            );
-    };
-
-    const createUrl = resource ? generateCreateUrl(resource, meta) : "";
+  const { hidden, disabled, label, title, LinkComponent, to } = useCreateButton(
+    {
+      resource: resourceNameFromProps ?? propResourceNameOrRouteName,
+      accessControl,
+      meta,
+    },
+  );
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (hidden) return null;
 
-    return (
-        <ActiveLink
-            to={createUrl}
-            replace={false}
-            onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-                if (data?.can === false) {
-                    e.preventDefault();
-                    return;
-                }
-                if (onClick) {
-                    e.preventDefault();
-                    onClick(e);
-                }
-            }}
-        >
-            <Button
-                icon={<PlusSquareOutlined />}
-                disabled={data?.can === false}
-                title={createButtonDisabledTitle()}
-                data-testid={RefineButtonTestIds.CreateButton}
-                className={RefineButtonClassNames.CreateButton}
-                type="primary"
-                {...rest}
-            >
-                {!hideText &&
-                    (children ?? translate("buttons.create", "Create"))}
-            </Button>
-        </ActiveLink>
-    );
+  return (
+    <LinkComponent
+      to={to}
+      replace={false}
+      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
+      }}
+    >
+      <Button
+        icon={<PlusSquareOutlined />}
+        disabled={disabled}
+        title={title}
+        data-testid={RefineButtonTestIds.CreateButton}
+        className={RefineButtonClassNames.CreateButton}
+        type="primary"
+        {...rest}
+      >
+        {!hideText && (children ?? label)}
+      </Button>
+    </LinkComponent>
+  );
 };