@refinedev/antd 5.37.4 → 6.0.0

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

@@ -1,28 +1,28 @@
 import React from "react";
 import { Card, Space, Spin } from "antd";
 import {
-    useNavigation,
-    useTranslate,
-    useUserFriendlyName,
-    useRefineContext,
-    useResource,
-    useToPath,
-    useRouterType,
-    useBack,
-    useGo,
+  useNavigation,
+  useTranslate,
+  useUserFriendlyName,
+  useRefineContext,
+  useResource,
+  useToPath,
+  useRouterType,
+  useBack,
+  useGo,
 } from "@refinedev/core";
 
 import {
-    EditButton,
-    DeleteButton,
-    RefreshButton,
-    ListButton,
-    Breadcrumb,
-    PageHeader,
-    ListButtonProps,
-    EditButtonProps,
-    DeleteButtonProps,
-    RefreshButtonProps,
+  EditButton,
+  DeleteButton,
+  RefreshButton,
+  ListButton,
+  Breadcrumb,
+  PageHeader,
+  ListButtonProps,
+  EditButtonProps,
+  DeleteButtonProps,
+  RefreshButtonProps,
 } from "@components";
 import { ShowProps } from "../types";
 
@@ -33,184 +33,174 @@ import { ShowProps } from "../types";
  * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/basic-views/show} for more details.
  */
 export const Show: React.FC<ShowProps> = ({
-    title,
-    canEdit,
-    canDelete,
-    isLoading = false,
-    children,
-    resource: resourceFromProps,
-    recordItemId,
-    dataProviderName,
-    breadcrumb: breadcrumbFromProps,
-    contentProps,
-    headerProps,
-    wrapperProps,
-    headerButtons,
-    footerButtons,
-    footerButtonProps,
-    headerButtonProps,
-    goBack: goBackFromProps,
+  title,
+  canEdit,
+  canDelete,
+  isLoading = false,
+  children,
+  resource: resourceFromProps,
+  recordItemId,
+  dataProviderName,
+  breadcrumb: breadcrumbFromProps,
+  contentProps,
+  headerProps,
+  wrapperProps,
+  headerButtons,
+  footerButtons,
+  footerButtonProps,
+  headerButtonProps,
+  goBack: goBackFromProps,
 }) => {
-    const translate = useTranslate();
-    const { options: { breadcrumb: globalBreadcrumb } = {} } =
-        useRefineContext();
+  const translate = useTranslate();
+  const {
+    options: { breadcrumb: globalBreadcrumb } = {},
+  } = useRefineContext();
 
-    const routerType = useRouterType();
-    const back = useBack();
-    const go = useGo();
-    const { goBack, list: legacyGoList } = useNavigation();
-    const getUserFriendlyName = useUserFriendlyName();
+  const routerType = useRouterType();
+  const back = useBack();
+  const go = useGo();
+  const { goBack, list: legacyGoList } = useNavigation();
+  const getUserFriendlyName = useUserFriendlyName();
 
-    const {
-        resource,
-        action,
-        id: idFromParams,
-        identifier,
-    } = useResource(resourceFromProps);
+  const {
+    resource,
+    action,
+    id: idFromParams,
+    identifier,
+  } = useResource(resourceFromProps);
 
-    const goListPath = useToPath({
-        resource,
-        action: "list",
-    });
+  const goListPath = useToPath({
+    resource,
+    action: "list",
+  });
 
-    const id = recordItemId ?? idFromParams;
+  const id = recordItemId ?? idFromParams;
 
-    const breadcrumb =
-        typeof breadcrumbFromProps === "undefined"
-            ? globalBreadcrumb
-            : breadcrumbFromProps;
+  const breadcrumb =
+    typeof breadcrumbFromProps === "undefined"
+      ? globalBreadcrumb
+      : breadcrumbFromProps;
 
-    const hasList = resource?.list && !recordItemId;
-    const isDeleteButtonVisible =
-        canDelete ?? resource?.meta?.canDelete ?? resource?.canDelete;
-    const isEditButtonVisible =
-        canEdit ?? resource?.canEdit ?? !!resource?.edit;
+  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 : identifier,
-          }
-        : undefined;
-    const editButtonProps: EditButtonProps | undefined = isEditButtonVisible
-        ? {
-              ...(isLoading ? { disabled: true } : {}),
-              type: "primary",
-              resource: routerType === "legacy" ? resource?.route : identifier,
-              recordItemId: id,
-          }
-        : undefined;
-    const deleteButtonProps: DeleteButtonProps | undefined =
-        isDeleteButtonVisible
-            ? {
-                  ...(isLoading ? { disabled: true } : {}),
-                  resource:
-                      routerType === "legacy" ? resource?.route : identifier,
-                  recordItemId: id,
-                  onSuccess: () => {
-                      if (routerType === "legacy") {
-                          legacyGoList(resource?.route ?? resource?.name ?? "");
-                      } else {
-                          go({ to: goListPath });
-                      }
-                  },
-                  dataProviderName,
-              }
-            : undefined;
-    const refreshButtonProps: RefreshButtonProps = {
+  const listButtonProps: ListButtonProps | undefined = hasList
+    ? {
+        resource: routerType === "legacy" ? resource?.route : identifier,
+      }
+    : undefined;
+  const editButtonProps: EditButtonProps | undefined = isEditButtonVisible
+    ? {
         ...(isLoading ? { disabled: true } : {}),
+        type: "primary",
         resource: routerType === "legacy" ? resource?.route : identifier,
         recordItemId: id,
+      }
+    : undefined;
+  const deleteButtonProps: DeleteButtonProps | undefined = isDeleteButtonVisible
+    ? {
+        ...(isLoading ? { disabled: true } : {}),
+        resource: routerType === "legacy" ? resource?.route : identifier,
+        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 : identifier,
+    recordItemId: id,
+    dataProviderName,
+  };
 
-    const defaultHeaderButtons = (
-        <>
-            {hasList && <ListButton {...listButtonProps} />}
-            {isEditButtonVisible && <EditButton {...editButtonProps} />}
-            {isDeleteButtonVisible && <DeleteButton {...deleteButtonProps} />}
-            <RefreshButton {...refreshButtonProps} />
-        </>
-    );
+  const defaultHeaderButtons = (
+    <>
+      {hasList && <ListButton {...listButtonProps} />}
+      {isEditButtonVisible && <EditButton {...editButtonProps} />}
+      {isDeleteButtonVisible && <DeleteButton {...deleteButtonProps} />}
+      <RefreshButton {...refreshButtonProps} />
+    </>
+  );
 
-    return (
-        <div {...(wrapperProps ?? {})}>
-            <PageHeader
-                ghost={false}
-                backIcon={goBackFromProps}
-                onBack={
-                    action !== "list" && typeof action !== "undefined"
-                        ? routerType === "legacy"
-                            ? goBack
-                            : back
-                        : undefined
-                }
-                title={
-                    title ??
-                    translate(
-                        `${identifier}.titles.show`,
-                        `Show ${getUserFriendlyName(
-                            resource?.meta?.label ??
-                                resource?.options?.label ??
-                                resource?.label ??
-                                identifier,
-                            "singular",
-                        )}`,
-                    )
-                }
-                extra={
-                    <Space
-                        key="extra-buttons"
-                        wrap
-                        {...(headerButtonProps ?? {})}
-                    >
-                        {headerButtons
-                            ? typeof headerButtons === "function"
-                                ? headerButtons({
-                                      defaultButtons: defaultHeaderButtons,
-                                      deleteButtonProps,
-                                      editButtonProps,
-                                      listButtonProps,
-                                      refreshButtonProps,
-                                  })
-                                : headerButtons
-                            : defaultHeaderButtons}
-                    </Space>
-                }
-                breadcrumb={
-                    typeof breadcrumb !== "undefined" ? (
-                        <>{breadcrumb}</> ?? undefined
-                    ) : (
-                        <Breadcrumb />
-                    )
-                }
-                {...(headerProps ?? {})}
-            >
-                <Spin spinning={isLoading}>
-                    <Card
-                        bordered={false}
-                        actions={
-                            footerButtons
-                                ? [
-                                      <Space
-                                          key="footer-buttons"
-                                          wrap
-                                          {...footerButtonProps}
-                                      >
-                                          {typeof footerButtons === "function"
-                                              ? footerButtons({
-                                                    defaultButtons: null,
-                                                })
-                                              : footerButtons}
-                                      </Space>,
-                                  ]
-                                : undefined
-                        }
-                        {...(contentProps ?? {})}
-                    >
-                        {children}
-                    </Card>
-                </Spin>
-            </PageHeader>
-        </div>
-    );
+  return (
+    <div {...(wrapperProps ?? {})}>
+      <PageHeader
+        ghost={false}
+        backIcon={goBackFromProps}
+        onBack={
+          action !== "list" && typeof action !== "undefined"
+            ? routerType === "legacy"
+              ? goBack
+              : back
+            : undefined
+        }
+        title={
+          title ??
+          translate(
+            `${identifier}.titles.show`,
+            `Show ${getUserFriendlyName(
+              resource?.meta?.label ??
+                resource?.options?.label ??
+                resource?.label ??
+                identifier,
+              "singular",
+            )}`,
+          )
+        }
+        extra={
+          <Space key="extra-buttons" wrap {...(headerButtonProps ?? {})}>
+            {headerButtons
+              ? typeof headerButtons === "function"
+                ? headerButtons({
+                    defaultButtons: defaultHeaderButtons,
+                    deleteButtonProps,
+                    editButtonProps,
+                    listButtonProps,
+                    refreshButtonProps,
+                  })
+                : headerButtons
+              : defaultHeaderButtons}
+          </Space>
+        }
+        breadcrumb={
+          typeof breadcrumb !== "undefined" ? (
+            <>{breadcrumb}</> ?? undefined
+          ) : (
+            <Breadcrumb />
+          )
+        }
+        {...(headerProps ?? {})}
+      >
+        <Spin spinning={isLoading}>
+          <Card
+            bordered={false}
+            actions={
+              footerButtons
+                ? [
+                    <Space key="footer-buttons" wrap {...footerButtonProps}>
+                      {typeof footerButtons === "function"
+                        ? footerButtons({
+                            defaultButtons: null,
+                          })
+                        : footerButtons}
+                    </Space>,
+                  ]
+                : undefined
+            }
+            {...(contentProps ?? {})}
+          >
+            {children}
+          </Card>
+        </Spin>
+      </PageHeader>
+    </div>
+  );
 };

package/src/components/crud/types.ts

@@ -1,74 +1,59 @@
 import { CardProps, SpaceProps } from "antd";
 import {
-    CreateButtonProps,
-    DeleteButtonProps,
-    EditButtonProps,
-    ListButtonProps,
-    RefreshButtonProps,
-    SaveButtonProps,
+  CreateButtonProps,
+  DeleteButtonProps,
+  EditButtonProps,
+  ListButtonProps,
+  RefreshButtonProps,
+  SaveButtonProps,
 } from "../buttons/types";
 import {
-    RefineCrudCreateProps,
-    RefineCrudEditProps,
-    RefineCrudListProps,
-    RefineCrudShowProps,
+  RefineCrudCreateProps,
+  RefineCrudEditProps,
+  RefineCrudListProps,
+  RefineCrudShowProps,
 } from "@refinedev/ui-types";
 import { PageHeaderProps } from "../pageHeader";
 
 export type CreateProps = RefineCrudCreateProps<
-    SaveButtonProps,
-    SpaceProps,
-    SpaceProps,
-    React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >,
-    PageHeaderProps,
-    CardProps
+  SaveButtonProps,
+  SpaceProps,
+  SpaceProps,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  PageHeaderProps,
+  CardProps
 >;
 
 export type EditProps = RefineCrudEditProps<
-    SaveButtonProps,
-    DeleteButtonProps,
-    SpaceProps,
-    SpaceProps,
-    React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >,
-    PageHeaderProps,
-    CardProps,
-    {},
-    RefreshButtonProps,
-    ListButtonProps
+  SaveButtonProps,
+  DeleteButtonProps,
+  SpaceProps,
+  SpaceProps,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  PageHeaderProps,
+  CardProps,
+  {},
+  RefreshButtonProps,
+  ListButtonProps
 >;
 
 export type ListProps = RefineCrudListProps<
-    CreateButtonProps,
-    SpaceProps,
-    React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >,
-    PageHeaderProps,
-    React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >
+  CreateButtonProps,
+  SpaceProps,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  PageHeaderProps,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 >;
 
 export type ShowProps = RefineCrudShowProps<
-    SpaceProps,
-    SpaceProps,
-    React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >,
-    PageHeaderProps,
-    CardProps,
-    {},
-    EditButtonProps,
-    DeleteButtonProps,
-    RefreshButtonProps,
-    ListButtonProps
+  SpaceProps,
+  SpaceProps,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  PageHeaderProps,
+  CardProps,
+  {},
+  EditButtonProps,
+  DeleteButtonProps,
+  RefreshButtonProps,
+  ListButtonProps
 >;

package/src/components/fields/boolean/index.tsx

@@ -11,16 +11,16 @@ import { BooleanFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/boolean} for more details.
  */
 export const BooleanField: React.FC<BooleanFieldProps> = ({
-    value,
-    valueLabelTrue = "true",
-    valueLabelFalse = "false",
-    trueIcon = <CheckOutlined />,
-    falseIcon = <CloseOutlined />,
-    ...rest
+  value,
+  valueLabelTrue = "true",
+  valueLabelFalse = "false",
+  trueIcon = <CheckOutlined />,
+  falseIcon = <CloseOutlined />,
+  ...rest
 }) => {
-    return (
-        <Tooltip title={value ? valueLabelTrue : valueLabelFalse} {...rest}>
-            {value ? <span>{trueIcon}</span> : <span>{falseIcon}</span>}
-        </Tooltip>
-    );
+  return (
+    <Tooltip title={value ? valueLabelTrue : valueLabelFalse} {...rest}>
+      {value ? <span>{trueIcon}</span> : <span>{falseIcon}</span>}
+    </Tooltip>
+  );
 };

package/src/components/fields/date/index.tsx

@@ -12,20 +12,20 @@ import { DateFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/date} for more details.
  */
 export const DateField: React.FC<DateFieldProps> = ({
-    value,
-    locales,
-    format: dateFormat = "L",
-    ...rest
+  value,
+  locales,
+  format: dateFormat = "L",
+  ...rest
 }) => {
-    dayjs.extend(LocalizedFormat);
+  dayjs.extend(LocalizedFormat);
 
-    const defaultLocale = dayjs.locale();
+  const defaultLocale = dayjs.locale();
 
-    return (
-        <Typography.Text {...rest}>
-            {dayjs(value)
-                .locale(locales || defaultLocale)
-                .format(dateFormat)}
-        </Typography.Text>
-    );
+  return (
+    <Typography.Text {...rest}>
+      {dayjs(value)
+        .locale(locales || defaultLocale)
+        .format(dateFormat)}
+    </Typography.Text>
+  );
 };

package/src/components/fields/email/index.tsx

@@ -10,9 +10,9 @@ import { EmailFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/email} for more details.
  */
 export const EmailField: React.FC<EmailFieldProps> = ({ value, ...rest }) => {
-    return (
-        <Typography.Link href={`mailto:${value}`} {...rest}>
-            {value}
-        </Typography.Link>
-    );
+  return (
+    <Typography.Link href={`mailto:${value}`} {...rest}>
+      {value}
+    </Typography.Link>
+  );
 };

package/src/components/fields/file/index.tsx

@@ -9,13 +9,13 @@ import { FileFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/file} for more details.
  */
 export const FileField: React.FC<FileFieldProps> = ({
-    title,
-    src,
-    ...rest
+  title,
+  src,
+  ...rest
 }) => {
-    return (
-        <UrlField value={src} title={title} {...rest}>
-            {title ?? src}
-        </UrlField>
-    );
+  return (
+    <UrlField value={src} title={title} {...rest}>
+      {title ?? src}
+    </UrlField>
+  );
 };

package/src/components/fields/image/index.tsx

@@ -9,9 +9,9 @@ import { ImageFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/image} for more details.
  */
 export const ImageField: React.FC<ImageFieldProps> = ({
-    value,
-    imageTitle,
-    ...rest
+  value,
+  imageTitle,
+  ...rest
 }) => {
-    return <Image {...rest} src={value} title={imageTitle} />;
+  return <Image {...rest} src={value} title={imageTitle} />;
 };

package/src/components/fields/markdown/index.tsx

@@ -10,14 +10,14 @@ import { RefineFieldMarkdownProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/markdown} for more details.
  */
 export const MarkdownField: React.FC<RefineFieldMarkdownProps> = ({
-    value = "",
+  value = "",
 }) => {
-    // There's an issue related with the type inconsistency of the `remark-gfm` and `remark-rehype` packages, we need to cast the `gfm` as any. (https://github.com/orgs/rehypejs/discussions/63)
-    return (
-        <ReactMarkdown
-            remarkPlugins={[gfm] as unknown as ReactMarkdown.PluggableList}
-        >
-            {value}
-        </ReactMarkdown>
-    );
+  // There's an issue related with the type inconsistency of the `remark-gfm` and `remark-rehype` packages, we need to cast the `gfm` as any. (https://github.com/orgs/rehypejs/discussions/63)
+  return (
+    <ReactMarkdown
+      remarkPlugins={[gfm] as unknown as ReactMarkdown.PluggableList}
+    >
+      {value}
+    </ReactMarkdown>
+  );
 };