@refinedev/antd 5.37.4 → 6.0.0

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

@@ -2,18 +2,18 @@ import React, { useContext } from "react";
 import { Button } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
 import {
-    useCan,
-    useNavigation,
-    useTranslate,
-    useResource,
-    useRouterContext,
-    useRouterType,
-    useLink,
-    AccessControlContext,
+  useCan,
+  useNavigation,
+  useTranslate,
+  useResource,
+  useRouterContext,
+  useRouterType,
+  useLink,
+  AccessControlContext,
 } from "@refinedev/core";
 import {
-    RefineButtonTestIds,
-    RefineButtonClassNames,
+  RefineButtonTestIds,
+  RefineButtonClassNames,
 } from "@refinedev/ui-types";
 
 import { CloneButtonProps } from "../types";
@@ -26,92 +26,92 @@ 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,
-    accessControl,
-    meta,
-    children,
-    onClick,
-    ...rest
+  resourceNameOrRouteName: propResourceNameOrRouteName,
+  resource: resourceNameFromProps,
+  recordItemId,
+  hideText = false,
+  accessControl,
+  meta,
+  children,
+  onClick,
+  ...rest
 }) => {
-    const accessControlContext = useContext(AccessControlContext);
+  const accessControlContext = useContext(AccessControlContext);
 
-    const accessControlEnabled =
-        accessControl?.enabled ??
-        accessControlContext.options.buttons.enableAccessControl;
+  const accessControlEnabled =
+    accessControl?.enabled ??
+    accessControlContext.options.buttons.enableAccessControl;
 
-    const hideIfUnauthorized =
-        accessControl?.hideIfUnauthorized ??
-        accessControlContext.options.buttons.hideIfUnauthorized;
+  const hideIfUnauthorized =
+    accessControl?.hideIfUnauthorized ??
+    accessControlContext.options.buttons.hideIfUnauthorized;
 
-    const { cloneUrl: generateCloneUrl } = useNavigation();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const { cloneUrl: generateCloneUrl } = useNavigation();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
 
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    const translate = useTranslate();
+  const translate = useTranslate();
 
-    const { id, resource } = useResource(
-        resourceNameFromProps ?? propResourceNameOrRouteName,
-    );
+  const { id, resource } = useResource(
+    resourceNameFromProps ?? propResourceNameOrRouteName,
+  );
+
+  const { data } = useCan({
+    resource: resource?.name,
+    action: "create",
+    params: { id: recordItemId ?? id, resource },
+    queryOptions: {
+      enabled: accessControlEnabled,
+    },
+  });
 
-    const { data } = useCan({
-        resource: resource?.name,
-        action: "create",
-        params: { id: recordItemId ?? id, resource },
-        queryOptions: {
-            enabled: accessControlEnabled,
-        },
-    });
+  const createButtonDisabledTitle = () => {
+    if (data?.can) return "";
+    if (data?.reason) return data.reason;
 
-    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",
-            );
-    };
+    return translate(
+      "buttons.notAccessTitle",
+      "You don't have permission to access",
+    );
+  };
 
-    const cloneUrl =
-        resource && (recordItemId || id)
-            ? generateCloneUrl(resource, recordItemId! ?? id!, meta)
-            : "";
+  const cloneUrl =
+    resource && (recordItemId || id)
+      ? generateCloneUrl(resource, recordItemId! ?? id!, meta)
+      : "";
 
-    if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
-        return null;
-    }
+  if (accessControlEnabled && hideIfUnauthorized && !data?.can) {
+    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 (
+    <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>
+  );
 };