@refinedev/antd 6.0.0 → 6.0.1

package/src/hooks/form/useForm.ts

@@ -1,22 +1,24 @@
 import React from "react";
-import { FormInstance, FormProps, Form, ButtonProps } from "antd";
-import { useForm as useFormSF } from "sunflower-antd";
 import {
-  AutoSaveProps,
-  flattenObjectKeys,
-  propertyPathToArray,
-} from "@refinedev/core";
+  type FormInstance,
+  type FormProps,
+  Form,
+  type ButtonProps,
+} from "antd";
+import { useForm as useFormSF, type UseFormConfig } from "sunflower-antd";
 
 import {
-  HttpError,
-  BaseRecord,
+  type AutoSaveProps,
+  flattenObjectKeys,
+  propertyPathToArray,
+  type HttpError,
+  type BaseRecord,
   useForm as useFormCore,
-  UseFormReturnType as UseFormReturnTypeCore,
+  type UseFormReturnType as UseFormReturnTypeCore,
   useWarnAboutChange,
-  UseFormProps as UseFormPropsCore,
-  CreateResponse,
-  UpdateResponse,
-  pickNotDeprecated,
+  type UseFormProps as UseFormPropsCore,
+  type CreateResponse,
+  type UpdateResponse,
   useTranslate,
   useRefineContext,
 } from "@refinedev/core";
@@ -47,7 +49,8 @@ export type UseFormProps<
    * @see {@link https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/}
    */
   disableServerSideValidation?: boolean;
-} & AutoSaveProps<TVariables>;
+} & AutoSaveProps<TVariables> &
+  Pick<UseFormConfig, "defaultFormValues">;
 
 export type UseFormReturnType<
   TQueryFnData extends BaseRecord = BaseRecord,
@@ -72,7 +75,10 @@ export type UseFormReturnType<
   onFinish: (
     values?: TVariables,
   ) => Promise<CreateResponse<TResponse> | UpdateResponse<TResponse> | void>;
-};
+} & Pick<
+    ReturnType<typeof useFormSF<TResponse, TVariables>>,
+    "defaultFormValuesLoading"
+  >;
 
 /**
  * `useForm` is used to manage forms. It uses Ant Design {@link https://ant.design/components/form/ Form} data scope management under the hood and returns the required props for managing the form actions.
@@ -107,7 +113,6 @@ export const useForm = <
   successNotification,
   errorNotification,
   meta,
-  metaData,
   queryMeta,
   mutationMeta,
   liveMode,
@@ -123,6 +128,7 @@ export const useForm = <
   id: idFromProps,
   overtimeOptions,
   optimisticUpdateMap,
+  defaultFormValues,
   disableServerSideValidation: disableServerSideValidationProp = false,
 }: UseFormProps<
   TQueryFnData,
@@ -148,6 +154,7 @@ export const useForm = <
   const [formAnt] = Form.useForm();
   const formSF = useFormSF<TResponse, TVariables>({
     form: formAnt,
+    defaultFormValues,
   });
   const { form } = formSF;
 
@@ -168,11 +175,10 @@ export const useForm = <
         return;
       }
 
+      type FieldData = Parameters<typeof form.setFields>[0];
+      type NamePath = FieldData[number]["name"];
       // antd form expects error object to be in a specific format.
-      let parsedErrors: {
-        name: string | number | (string | number)[];
-        errors?: string[] | undefined;
-      }[] = [];
+      let parsedErrors: FieldData = [];
 
       // reset antd errors before setting new errors
       const fieldsValue = form.getFieldsValue() as unknown as object;
@@ -181,7 +187,7 @@ export const useForm = <
 
       parsedErrors = fields.map((field) => {
         return {
-          name: propertyPathToArray(field),
+          name: propertyPathToArray(field) as NamePath,
           errors: undefined,
         };
       });
@@ -217,7 +223,7 @@ export const useForm = <
         }
 
         parsedErrors.push({
-          name: propertyPathToArray(key),
+          name: propertyPathToArray(key) as NamePath,
           errors: newError,
         });
       }
@@ -231,8 +237,7 @@ export const useForm = <
     resource,
     successNotification,
     errorNotification,
-    meta: pickNotDeprecated(meta, metaData),
-    metaData: pickNotDeprecated(meta, metaData),
+    meta,
     queryMeta,
     mutationMeta,
     liveMode,
@@ -251,7 +256,7 @@ export const useForm = <
     autoSave,
   });
 
-  const { formLoading, onFinish, queryResult, id, onFinishAutoSave } =
+  const { formLoading, onFinish, query, id, onFinishAutoSave } =
     useFormCoreResult;
 
   const { warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine, setWarnWhen } =
@@ -259,9 +264,11 @@ export const useForm = <
   const warnWhenUnsavedChanges =
     warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
 
+  // populate form with data when query is ready or id changes
+  // form populated via initialValues prop
   React.useEffect(() => {
     form.resetFields();
-  }, [queryResult?.data?.data, id]);
+  }, [query?.data?.data, id]);
 
   const onKeyUp = (event: React.KeyboardEvent<HTMLFormElement>) => {
     if (submitOnEnter && event.key === "Enter") {
@@ -279,7 +286,9 @@ export const useForm = <
 
       const onFinishFromProps = autoSave?.onFinish ?? ((values) => values);
 
-      return onFinishAutoSave(onFinishFromProps(allValues));
+      return onFinishAutoSave(onFinishFromProps(allValues)).catch(
+        (error) => error,
+      );
     }
 
     return changeValues;
@@ -300,9 +309,10 @@ export const useForm = <
         onFinish(values).catch((error) => error),
       onKeyUp,
       onValuesChange,
-      initialValues: queryResult?.data?.data,
+      initialValues: query?.data?.data,
     },
     saveButtonProps,
+    defaultFormValuesLoading: formSF.defaultFormValuesLoading,
     ...useFormCoreResult,
     onFinish: async (values?: TVariables) => {
       return await onFinish(values ?? formSF.form.getFieldsValue(true));

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

@@ -1,22 +1,22 @@
 import React, { useCallback } from "react";
-import { FormInstance, FormProps, ModalProps } from "antd";
+import type { FormInstance, FormProps, ModalProps } from "antd";
 
 import {
   useTranslate,
   useWarnAboutChange,
-  HttpError,
-  UseFormProps as UseFormPropsCore,
-  BaseRecord,
-  LiveModeProps,
-  BaseKey,
+  type HttpError,
+  type UseFormProps as UseFormPropsCore,
+  type BaseRecord,
+  type LiveModeProps,
+  type BaseKey,
   useUserFriendlyName,
-  useResource,
-  FormWithSyncWithLocationParams,
+  useResourceParams,
+  type FormWithSyncWithLocationParams,
   useParsed,
   useGo,
   useInvalidate,
 } from "@refinedev/core";
-import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+import { useForm, type UseFormProps, type UseFormReturnType } from "../useForm";
 import { useModal } from "@hooks/modal";
 
 export type useModalFormFromSFReturnType<TResponse, TVariables> = {
@@ -32,8 +32,6 @@ export type useModalFormFromSFReturnType<TResponse, TVariables> = {
   initialValues: {};
   formResult: undefined;
   submit: (values?: TVariables) => Promise<TResponse>;
-  /** @deprecated Please use `open` instead. */
-  visible: boolean;
 };
 
 type useModalFormConfig = {
@@ -89,6 +87,7 @@ export type UseModalFormProps<
     defaultVisible?: boolean;
     autoSubmitClose?: boolean;
     autoResetForm?: boolean;
+    autoResetFormWhenClose?: boolean;
   };
 /**
  * `useModalForm` hook allows you to manage a form within a modal. It returns Ant Design {@link https://ant.design/components/form/ Form} and {@link https://ant.design/components/modal/ Modal} components props.
@@ -113,6 +112,7 @@ export const useModalForm = <
   defaultVisible = false,
   autoSubmitClose = true,
   autoResetForm = true,
+  autoResetFormWhenClose = true,
   autoSave,
   invalidates,
   ...rest
@@ -138,7 +138,7 @@ export const useModalForm = <
     resource,
     action: actionFromParams,
     identifier,
-  } = useResource(rest.resource);
+  } = useResourceParams({ resource: rest.resource });
 
   const parsed = useParsed();
   const go = useGo();
@@ -202,7 +202,6 @@ export const useModalForm = <
       close,
       open: modalProps.open || false,
       show,
-      visible,
     };
 
   React.useEffect(() => {
@@ -291,6 +290,10 @@ export const useModalForm = <
 
     setId?.(undefined);
     sunflowerUseModal.close();
+
+    if (autoResetFormWhenClose) {
+      form.resetFields();
+    }
   }, [warnWhen, autoSaveProps.status]);
 
   const handleShow = useCallback(
@@ -340,12 +343,7 @@ export const useModalForm = <
       title: translate(
         `${identifier}.titles.${rest.action}`,
         `${getUserFriendlyName(
-          `${rest.action} ${
-            resource?.meta?.label ??
-            resource?.options?.label ??
-            resource?.label ??
-            identifier
-          }`,
+          `${rest.action} ${resource?.meta?.label ?? identifier}`,
           "singular",
         )}`,
       ),

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

@@ -1,16 +1,16 @@
 import {
   useStepsForm as useStepsFormSF,
-  UseStepsFormConfig,
+  type UseStepsFormConfig,
 } from "sunflower-antd";
-import { FormInstance, FormProps } from "antd";
+import type { FormInstance, FormProps } from "antd";
 
-import {
+import type {
   HttpError,
   UseFormProps as UseFormPropsCore,
   BaseRecord,
 } from "@refinedev/core";
 
-import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
+import { useForm, type UseFormProps, type UseFormReturnType } from "../useForm";
 
 export type UseStepsFormFromSFReturnType<TResponse, TVariables> = {
   current: number;

package/src/hooks/import/index.tsx

@@ -1,14 +1,18 @@
 import React from "react";
-import { ButtonProps, notification, UploadProps, Progress } from "antd";
+import {
+  type ButtonProps,
+  notification,
+  type UploadProps,
+  Progress,
+} from "antd";
 import {
   useTranslate,
-  useResource,
-  BaseRecord,
-  HttpError,
+  useResourceParams,
+  type BaseRecord,
+  type HttpError,
   useImport as useImportCore,
-  UseImportReturnType,
-  ImportOptions,
-  pickNotDeprecated,
+  type UseImportReturnType,
+  type ImportOptions,
 } from "@refinedev/core";
 
 /**
@@ -29,13 +33,11 @@ export const useImport = <
   TVariables = any,
 >({
   resource: resourceFromProp,
-  resourceName,
   mapData = (item) => item as unknown as TVariables,
   paparseOptions,
   batchSize = Number.MAX_SAFE_INTEGER,
   onFinish,
   meta,
-  metaData,
   dataProviderName,
   onProgress: onProgressFromProp,
 }: ImportOptions<TItem, TVariables, TData> = {}): Omit<
@@ -47,7 +49,7 @@ export const useImport = <
 } => {
   const t = useTranslate();
 
-  const { resource } = useResource(resourceFromProp ?? resourceName);
+  const { resource } = useResourceParams({ resource: resourceFromProp });
 
   const { mutationResult, isLoading, handleChange } = useImportCore<
     TItem,
@@ -59,8 +61,7 @@ export const useImport = <
     mapData,
     paparseOptions,
     batchSize,
-    meta: pickNotDeprecated(meta, metaData),
-    metaData: pickNotDeprecated(meta, metaData),
+    meta,
     dataProviderName,
     onFinish,
     onProgress:

package/src/hooks/index.ts

@@ -2,8 +2,9 @@ export * from "./form";
 export * from "./table";
 export * from "./fields";
 export * from "./import";
-export * from "./list";
+export * from "./useSimpleList";
 export * from "./useFileUploadState";
 export * from "./modal";
 export * from "./useSiderVisible";
 export * from "./useThemedLayoutContext";
+export * from "./drawer";

package/src/hooks/modal/useModal/index.tsx

@@ -1,7 +1,7 @@
-import { ModalProps } from "antd";
+import type { ModalProps } from "antd";
 import {
   useModal as useCoreModal,
-  useModalReturnType as useCoreModelReturnType,
+  type useModalReturnType as useCoreModelReturnType,
 } from "@refinedev/core";
 
 export type useModalReturnType = {

package/src/hooks/table/useEditableTable/useEditableTable.ts

@@ -1,9 +1,14 @@
 import { useTable } from "@hooks";
-import { BaseKey, BaseRecord, HttpError, UseFormProps } from "@refinedev/core";
-import { ButtonProps } from "antd";
+import type {
+  BaseKey,
+  BaseRecord,
+  HttpError,
+  UseFormProps,
+} from "@refinedev/core";
+import type { ButtonProps } from "antd";
 
-import { useTableProps, useTableReturnType } from "../useTable";
-import { UseFormReturnType, useForm } from "../../form/useForm";
+import type { useTableProps, useTableReturnType } from "../useTable";
+import { type UseFormReturnType, useForm } from "../../form/useForm";
 
 export type useEditableTableReturnType<
   TQueryFnData extends BaseRecord = BaseRecord,
@@ -112,11 +117,15 @@ export const useEditableTable = <
     formProps: {
       ...edit.formProps,
       onFinish: async (values) => {
-        const result = await edit.onFinish(values);
-        if (autoSubmitClose) {
-          setId(undefined);
+        try {
+          const result = await edit.onFinish(values);
+          if (autoSubmitClose) {
+            setId(undefined);
+          }
+          return result;
+        } catch (error) {
+          return error;
         }
-        return result;
       },
     },
     saveButtonProps,

package/src/hooks/table/useTable/paginationLink.tsx

@@ -1,5 +1,5 @@
-import { useLink, useRouterContext, useRouterType } from "@refinedev/core";
-import React, { ReactNode } from "react";
+import { useLink } from "@refinedev/core";
+import React, { type ReactNode } from "react";
 
 interface PaginationLinkProps {
   to: string;
@@ -7,14 +7,10 @@ interface PaginationLinkProps {
 }
 
 export const PaginationLink = ({ to, element }: PaginationLinkProps) => {
-  const { Link: LegacyLink } = useRouterContext();
-  const routerType = useRouterType();
   const Link = useLink();
 
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
-
   return (
-    <ActiveLink
+    <Link
       to={to}
       replace={false}
       onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
@@ -22,6 +18,6 @@ export const PaginationLink = ({ to, element }: PaginationLinkProps) => {
       }}
     >
       {element}
-    </ActiveLink>
+    </Link>
   );
 };

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

@@ -1,16 +1,22 @@
 import React, { Children, createElement, Fragment } from "react";
-import { Grid, FormProps, Form, TablePaginationConfig, TableProps } from "antd";
+import {
+  Grid,
+  type FormProps,
+  Form,
+  type TablePaginationConfig,
+  type TableProps,
+} from "antd";
 import { useForm as useFormSF } from "sunflower-antd";
 
 import {
   useLiveMode,
-  BaseRecord,
-  CrudFilters,
-  HttpError,
+  type BaseRecord,
+  type CrudFilters,
+  type HttpError,
   useTable as useTableCore,
-  useTableProps as useTablePropsCore,
-  useTableReturnType as useTableCoreReturnType,
-  pickNotDeprecated,
+  type useTableProps as useTablePropsCore,
+  type useTableReturnType as useTableCoreReturnType,
+  useSyncWithLocation,
 } from "@refinedev/core";
 
 import {
@@ -18,7 +24,7 @@ import {
   mapAntdFilterToCrudFilter,
 } from "@definitions/table";
 import { PaginationLink } from "./paginationLink";
-import { FilterValue, SorterResult } from "../../../definitions/table";
+import type { FilterValue, SorterResult } from "../../../definitions/table";
 
 export type useTableProps<TQueryFnData, TError, TSearchVariables, TData> =
   useTablePropsCore<TQueryFnData, TError, TData> & {
@@ -55,15 +61,7 @@ export const useTable = <
   TData extends BaseRecord = TQueryFnData,
 >({
   onSearch,
-  initialCurrent,
-  initialPageSize,
-  hasPagination = true,
-  pagination,
-  initialSorter,
-  permanentSorter,
-  initialFilter,
-  permanentFilter,
-  defaultSetFilterBehavior,
+  pagination: paginationFromProp,
   filters: filtersFromProp,
   sorters: sortersFromProp,
   syncWithLocation,
@@ -75,7 +73,6 @@ export const useTable = <
   onLiveEvent,
   liveParams,
   meta,
-  metaData,
   dataProviderName,
 }: useTableProps<
   TQueryFnData,
@@ -84,44 +81,36 @@ export const useTable = <
   TData
 > = {}): useTableReturnType<TData, TError, TSearchVariables> => {
   const {
-    tableQueryResult,
-    current,
-    setCurrent,
+    tableQuery,
+    currentPage,
+    setCurrentPage,
     pageSize,
     setPageSize,
     filters,
     setFilters,
     sorters,
     setSorters,
-    sorter,
-    setSorter,
     createLinkForSyncWithLocation,
     pageCount,
     overtime,
+    result,
   } = useTableCore<TQueryFnData, TError, TData>({
-    permanentSorter,
-    permanentFilter,
-    initialCurrent,
-    initialPageSize,
-    pagination,
-    hasPagination,
+    pagination: paginationFromProp,
     filters: filtersFromProp,
     sorters: sortersFromProp,
-    initialSorter,
-    initialFilter,
     syncWithLocation,
     resource,
-    defaultSetFilterBehavior,
     successNotification,
     errorNotification,
     queryOptions,
     liveMode: liveModeFromProp,
     onLiveEvent,
     liveParams,
-    meta: pickNotDeprecated(meta, metaData),
-    metaData: pickNotDeprecated(meta, metaData),
+    meta,
     dataProviderName,
   });
+  const { syncWithLocation: defaultSyncWithLocation } = useSyncWithLocation();
+  const shouldSyncWithLocation = syncWithLocation ?? defaultSyncWithLocation;
   const breakpoint = Grid.useBreakpoint();
   const [form] = Form.useForm<TSearchVariables>();
   const formSF = useFormSF<any, TSearchVariables>({
@@ -129,16 +118,38 @@ export const useTable = <
   });
   const liveMode = useLiveMode(liveModeFromProp);
 
-  const hasPaginationString = hasPagination === false ? "off" : "server";
-  const isPaginationEnabled =
-    (pagination?.mode ?? hasPaginationString) !== "off";
+  const isPaginationEnabled = paginationFromProp?.mode !== "off";
+
+  const preferredInitialFilters = filtersFromProp?.initial;
 
-  const preferredInitialFilters = pickNotDeprecated(
-    filtersFromProp?.initial,
-    initialFilter,
-  );
+  const { data, isFetched, isLoading } = tableQuery;
 
-  const { data, isFetched, isLoading } = tableQueryResult;
+  React.useEffect(() => {
+    if (shouldSyncWithLocation) {
+      // get registered fields of form
+      const registeredFields = formSF.form.getFieldsValue() as Record<
+        string,
+        any
+      >;
+      // map `filters` for registered fields
+      const filterFilterMap = Object.keys(registeredFields).reduce(
+        (acc, curr) => {
+          // find filter for current field
+          const filter = filters.find(
+            (filter) => "field" in filter && filter.field === curr,
+          );
+          // if filter exists, set value to filter value
+          if (filter) {
+            acc[curr] = filter?.value;
+          }
+          return acc;
+        },
+        {} as Record<string, any>,
+      );
+      // set values to form
+      formSF.form.setFieldsValue(filterFilterMap as any);
+    }
+  }, [shouldSyncWithLocation]);
 
   const onChange = (
     paginationState: TablePaginationConfig,
@@ -162,7 +173,7 @@ export const useTable = <
     }
 
     if (isPaginationEnabled) {
-      setCurrent?.(paginationState.current || 1);
+      setCurrentPage?.(paginationState.current || 1);
       setPageSize?.(paginationState.pageSize || 10);
     }
   };
@@ -173,7 +184,7 @@ export const useTable = <
       setFilters(searchFilters);
 
       if (isPaginationEnabled) {
-        setCurrent?.(1);
+        setCurrentPage?.(1);
       }
     }
   };
@@ -185,7 +196,7 @@ export const useTable = <
           const link = createLinkForSyncWithLocation({
             pagination: {
               pageSize,
-              current: page,
+              currentPage: page,
             },
             sorters,
             filters,
@@ -205,7 +216,7 @@ export const useTable = <
           }
 
           if (type === "jump-next" || type === "jump-prev") {
-            const elementChildren = (element as React.ReactElement)?.props
+            const elementChildren = (element as React.ReactElement<any>)?.props
               ?.children;
 
             return createElement(PaginationLink, {
@@ -220,7 +231,7 @@ export const useTable = <
           return element;
         },
         pageSize,
-        current,
+        current: currentPage,
         simple: !breakpoint.sm,
         position: !breakpoint.sm ? ["bottomCenter"] : ["bottomRight"],
         total: data?.total,
@@ -242,19 +253,18 @@ export const useTable = <
       pagination: antdPagination(),
       scroll: { x: true },
     },
-    tableQueryResult,
+    tableQuery,
     sorters,
-    sorter,
     filters,
     setSorters,
-    setSorter,
     setFilters,
-    current,
-    setCurrent,
+    currentPage,
+    setCurrentPage,
     pageSize,
     setPageSize,
     pageCount,
     createLinkForSyncWithLocation,
     overtime,
+    result,
   };
 };

package/src/hooks/useFileUploadState/index.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { UploadChangeParam } from "antd/lib/upload";
+import type { UploadChangeParam } from "antd/lib/upload";
 
 export type UseFileUploadStateType = () => {
   isLoading: boolean;