@refinedev/antd 5.32.0 → 5.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.32.0",
+  "version": "5.33.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "sideEffects": [
@@ -26,9 +26,9 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@refinedev/cli": "^2.7.0",
-    "@refinedev/ui-tests": "^1.11.0",
-    "@refinedev/core": "^4.32.0",
+    "@refinedev/cli": "^2.7.5",
+    "@refinedev/ui-tests": "^1.12.0",
+    "@refinedev/core": "^4.33.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@ant-design/icons": "5.0.1",
     "@ant-design/pro-layout": "7.8.3",
-    "@refinedev/ui-types": "^1.20.0",
+    "@refinedev/ui-types": "^1.21.0",
     "@tanstack/react-query": "^4.10.1",
     "antd": "^5.0.5",
     "dayjs": "^1.10.7",

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

@@ -2,10 +2,11 @@ import React from "react";
 import { Button } from "antd";
 import { RedoOutlined } from "@ant-design/icons";
 import {
-    useOne,
     useTranslate,
     useResource,
-    pickNotDeprecated,
+    useInvalidate,
+    queryKeys,
+    pickDataProvider,
 } from "@refinedev/core";
 import {
     RefineButtonClassNames,
@@ -14,9 +15,11 @@ 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/data/useOne `useOne`} method provided by your dataProvider.
+ * to update the data shown on the page via the {@link https://refine.dev/docs/api-reference/core/hooks/invalidate/useInvalidate `useInvalidate`} hook.
  *
  * @see {@link https://refine.dev/docs/api-reference/antd/components/buttons/refresh-button} for more details.
  */
@@ -25,36 +28,44 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
     resourceNameOrRouteName: propResourceNameOrRouteName,
     recordItemId,
     hideText = false,
-    meta,
-    metaData,
     dataProviderName,
     children,
     onClick,
+    meta: _meta,
+    metaData: _metaData,
     ...rest
 }) => {
     const translate = useTranslate();
 
-    const { identifier, id } = useResource(
+    const queryClient = useQueryClient();
+    const invalidates = useInvalidate();
+
+    const { resources, identifier, id } = useResource(
         resourceNameFromProps ?? propResourceNameOrRouteName,
     );
 
-    const { refetch, isFetching } = useOne({
-        resource: identifier,
-        id: recordItemId ?? id,
-        queryOptions: {
-            enabled: false,
-        },
-        meta: pickNotDeprecated(meta, metaData),
-        metaData: pickNotDeprecated(meta, metaData),
-        liveMode: "off",
-        dataProviderName,
+    const isInvalidating = !!queryClient.isFetching({
+        queryKey: queryKeys(
+            identifier,
+            pickDataProvider(identifier, dataProviderName, resources),
+        ).detail(recordItemId ?? id),
     });
 
+    const handleInvalidate = () => {
+        invalidates({
+            id: recordItemId ?? id,
+            invalidates: ["detail"],
+            dataProviderName,
+            resource: identifier,
+        });
+    };
+
     return (
         <Button
-            // TODO: fix any type
-            onClick={(e) => (onClick ? onClick(e as any) : refetch())}
-            icon={<RedoOutlined spin={isFetching} />}
+            onClick={(e) => {
+                onClick ? onClick(e) : handleInvalidate();
+            }}
+            icon={<RedoOutlined spin={isInvalidating} />}
             data-testid={RefineButtonTestIds.RefreshButton}
             className={RefineButtonClassNames.RefreshButton}
             {...rest}

package/src/hooks/form/useDrawerForm/useDrawerForm.ts

@@ -120,23 +120,12 @@ export const useDrawerForm = <
     TResponse,
     TResponseError
 > => {
+    const [initiallySynced, setInitiallySynced] = React.useState(false);
+
     const { visible, show, close } = useModal({
         defaultVisible,
     });
 
-    const useFormProps = useForm<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TData,
-        TResponse,
-        TResponseError
-    >({
-        ...rest,
-    });
-    const [initiallySynced, setInitiallySynced] = React.useState(false);
-    const { form, formProps, formLoading, id, setId, onFinish } = useFormProps;
-
     const { resource, action: actionFromParams } = useResource(rest.resource);
 
     const parsed = useParsed();
@@ -156,6 +145,25 @@ export const useDrawerForm = <
             ? `drawer-${resource?.identifier ?? resource?.name}-${action}`
             : undefined;
 
+    const useFormProps = useForm<
+        TQueryFnData,
+        TError,
+        TVariables,
+        TData,
+        TResponse,
+        TResponseError
+    >({
+        meta: {
+            ...(syncWithLocationKey
+                ? { [syncWithLocationKey]: undefined }
+                : {}),
+            ...rest.meta,
+        },
+        ...rest,
+    });
+
+    const { form, formProps, formLoading, id, setId, onFinish } = useFormProps;
+
     React.useEffect(() => {
         if (initiallySynced === false && syncWithLocationKey) {
             const openStatus = parsed?.params?.[syncWithLocationKey]?.open;

package/src/hooks/form/useModalForm/useModalForm.ts

@@ -130,19 +130,6 @@ export const useModalForm = <
 > => {
     const [initiallySynced, setInitiallySynced] = React.useState(false);
 
-    const useFormProps = useForm<
-        TQueryFnData,
-        TError,
-        TVariables,
-        TData,
-        TResponse,
-        TResponseError
-    >({
-        ...rest,
-    });
-
-    const { form, formProps, id, setId, formLoading, onFinish } = useFormProps;
-
     const {
         resource,
         action: actionFromParams,
@@ -167,6 +154,25 @@ export const useModalForm = <
             ? `modal-${identifier}-${action}`
             : undefined;
 
+    const useFormProps = useForm<
+        TQueryFnData,
+        TError,
+        TVariables,
+        TData,
+        TResponse,
+        TResponseError
+    >({
+        meta: {
+            ...(syncWithLocationKey
+                ? { [syncWithLocationKey]: undefined }
+                : {}),
+            ...rest.meta,
+        },
+        ...rest,
+    });
+
+    const { form, formProps, id, setId, formLoading, onFinish } = useFormProps;
+
     const translate = useTranslate();
 
     const { warnWhen, setWarnWhen } = useWarnAboutChange();

package/src/hooks/form/useStepsForm/useStepsForm.ts

@@ -14,7 +14,7 @@ import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
 
 export type UseStepsFormFromSFReturnType<TResponse, TVariables> = {
     current: number;
-    gotoStep: (step: number) => void;
+    gotoStep: (step: number) => Promise<TVariables> | true;
     stepsProps: {
         current: number;
         onChange: (currentStep: number) => void;

package/src/types/sunflower.d.ts

@@ -11,7 +11,7 @@ declare module "sunflower-antd" {
         config: UseStepsFormConfig,
     ) => {
         current: number;
-        gotoStep: (step: number) => void;
+        gotoStep: (step: number) => Promise<TVariables> | true;
         stepsProps: {
             current: number;
             onChange: (currentStep: number) => void;