@refinedev/antd 6.0.0 → 6.0.2

package/src/definitions/filter-mappers/index.ts

@@ -0,0 +1,56 @@
+import type {
+  FilterDropdownProps,
+  MapValueEvent,
+} from "../../components/table/components";
+import dayjs from "dayjs";
+
+/**
+ * It is a mapper function for the <DatePicker.RangePicker /> filter.
+ * when the `event` is:
+ * - `"value"`: It converts the `selectedKeys` to Dayjs objects to be used in the `<DatePicker.RangePicker />` component.
+ * - `"onChange"`, It converts the Dayjs objects to ISO 8601 string format to be used in the Refine(data-provider, syncWithLocation etc.) filter.
+ * @see {@link https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#rangepickerfiltermapper} for more details.
+ * @example
+ * ```tsx
+ * <Table.Column
+ *   dataIndex="createdAt"
+ *   title="Date & Time"
+ *   filterDropdown={(props) => (
+ *     <FilterDropdown
+ *       {...props}
+ *       mapValue={(selectedKeys, event) => {
+ *         return rangePickerFilterMapper(selectedKeys, event);
+ *       }}
+ *     >
+ *       <DatePicker.RangePicker />
+ *     </FilterDropdown>
+ *   )}
+ * />
+ * ```
+ */
+export const rangePickerFilterMapper = (
+  selectedKeys: FilterDropdownProps["selectedKeys"],
+  event: MapValueEvent,
+) => {
+  if (!selectedKeys) {
+    return selectedKeys;
+  }
+
+  if (event === "value") {
+    return selectedKeys.map((key) => {
+      if (typeof key === "string") {
+        return dayjs(key);
+      }
+
+      return key;
+    });
+  }
+
+  if (event === "onChange") {
+    if (selectedKeys.every(dayjs.isDayjs)) {
+      return selectedKeys.map((date: any) => dayjs(date).toISOString());
+    }
+  }
+
+  return selectedKeys;
+};

package/src/definitions/index.ts

@@ -1,3 +1,4 @@
 export * from "./table";
 export * from "./upload";
 export * from "./themes";
+export * from "./filter-mappers";

package/src/definitions/table/index.ts

@@ -1,14 +1,14 @@
 import {
-  CrudFilters,
-  CrudOperators,
-  CrudSorting,
-  CrudFilter,
+  type CrudFilters,
+  type CrudOperators,
+  type CrudSorting,
+  type CrudFilter,
   getDefaultFilter as getDefaultFilterCore,
   getDefaultSortOrder as getDefaultSortOrderCore,
-  ConditionalFilter,
-  LogicalFilter,
+  type ConditionalFilter,
+  type LogicalFilter,
 } from "@refinedev/core";
-import { TableProps } from "antd";
+import type { TableProps } from "antd";
 
 export type FilterValue = Parameters<
   NonNullable<TableProps["onChange"]>
@@ -32,9 +32,6 @@ export const getDefaultSortOrder = (
   return undefined;
 };
 
-/**
- * @deprecated getDefaultFilter moved to `@refinedev/core`. Use from `@refinedev/core`
- */
 export const getDefaultFilter = (
   columnName: string,
   filters?: CrudFilters,

package/src/definitions/themes/index.ts

@@ -1,4 +1,4 @@
-import { ThemeConfig } from "antd";
+import type { ThemeConfig } from "antd";
 
 type ThemeNames =
   | "Blue"

package/src/hooks/drawer/index.ts

@@ -0,0 +1 @@
+export * from "./useDrawer";

package/src/hooks/drawer/useDrawer/index.tsx

@@ -0,0 +1,39 @@
+import type { DrawerProps } from "antd";
+import { useModal, type useModalReturnType } from "@refinedev/core";
+
+export type useDrawerReturnType = {
+  drawerProps: DrawerProps;
+} & Omit<useModalReturnType, "visible">;
+
+export type useDrawerProps = {
+  /**
+   * Default props for Ant Design {@link https://ant.design/components/drawer/ `<Drawer>`} component.
+   */
+  drawerProps?: DrawerProps;
+};
+
+/**
+ * By using `useDrawer` you get props for your records from API in accordance with Ant Design {@link https://ant.design/components/drawer/ `<Drawer>`} component.
+ *
+ * @see {@link https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer} for more details.
+ */
+export const useDrawer = ({
+  drawerProps = {},
+}: useDrawerProps = {}): useDrawerReturnType => {
+  const { show, close, visible } = useModal({
+    defaultVisible: drawerProps.open,
+  });
+
+  return {
+    drawerProps: {
+      ...drawerProps,
+      onClose: (e: React.MouseEvent | React.KeyboardEvent) => {
+        drawerProps.onClose?.(e);
+        close();
+      },
+      open: visible,
+    },
+    show,
+    close,
+  };
+};

package/src/hooks/fields/useCheckboxGroup/index.ts

@@ -1,20 +1,20 @@
-import { QueryObserverResult } from "@tanstack/react-query";
+import type { QueryObserverResult } from "@tanstack/react-query";
 import type { Checkbox } from "antd";
 
 import {
-  BaseRecord,
-  GetListResponse,
-  HttpError,
-  UseSelectProps,
+  type BaseRecord,
+  type GetListResponse,
+  type HttpError,
+  type UseSelectProps,
   useSelect,
-  BaseKey,
-  pickNotDeprecated,
-  BaseOption,
+  type BaseKey,
+  type BaseOption,
 } from "@refinedev/core";
 
 export type UseCheckboxGroupReturnType<
   TData extends BaseRecord = BaseRecord,
   TOption extends BaseOption = BaseOption,
+  TError extends HttpError = HttpError,
 > = {
   checkboxGroupProps: Omit<
     React.ComponentProps<typeof Checkbox.Group>,
@@ -22,7 +22,7 @@ export type UseCheckboxGroupReturnType<
   > & {
     options: TOption[];
   };
-  queryResult: QueryObserverResult<GetListResponse<TData>>;
+  query: QueryObserverResult<GetListResponse<TData>, TError>;
 };
 
 type UseCheckboxGroupProps<TQueryFnData, TError, TData> = Omit<
@@ -53,54 +53,47 @@ export const useCheckboxGroup = <
   TOption extends BaseOption = BaseOption,
 >({
   resource,
-  sort,
   sorters,
   filters,
   optionLabel,
   optionValue,
   queryOptions,
-  fetchSize,
   pagination,
   liveMode,
   defaultValue,
+  selectedOptionsOrder,
   onLiveEvent,
   liveParams,
   meta,
-  metaData,
   dataProviderName,
+  ...rest
 }: UseCheckboxGroupProps<
   TQueryFnData,
   TError,
   TData
 >): UseCheckboxGroupReturnType<TData, TOption> => {
-  const { queryResult, options } = useSelect<
-    TQueryFnData,
-    TError,
-    TData,
-    TOption
-  >({
+  const { query, options } = useSelect<TQueryFnData, TError, TData, TOption>({
     resource,
-    sort,
     sorters,
     filters,
     optionLabel,
     optionValue,
     queryOptions,
-    fetchSize,
     pagination,
     liveMode,
     defaultValue,
+    selectedOptionsOrder,
     onLiveEvent,
     liveParams,
-    meta: pickNotDeprecated(meta, metaData),
-    metaData: pickNotDeprecated(meta, metaData),
+    meta,
     dataProviderName,
+    ...rest,
   });
   return {
     checkboxGroupProps: {
       options,
       defaultValue,
     },
-    queryResult,
+    query,
   };
 };

package/src/hooks/fields/useRadioGroup/index.ts

@@ -1,25 +1,25 @@
-import { QueryObserverResult } from "@tanstack/react-query";
+import type { QueryObserverResult } from "@tanstack/react-query";
 import type { Radio } from "antd";
 
 import {
-  BaseKey,
-  BaseOption,
-  BaseRecord,
-  GetListResponse,
-  HttpError,
-  pickNotDeprecated,
+  type BaseKey,
+  type BaseOption,
+  type BaseRecord,
+  type GetListResponse,
+  type HttpError,
   useSelect,
-  UseSelectProps,
+  type UseSelectProps,
 } from "@refinedev/core";
 
 export type UseRadioGroupReturnType<
   TData extends BaseRecord = BaseRecord,
   TOption extends BaseOption = BaseOption,
+  TError extends HttpError = HttpError,
 > = {
   radioGroupProps: Omit<React.ComponentProps<typeof Radio.Group>, "options"> & {
     options: TOption[];
   };
-  queryResult: QueryObserverResult<GetListResponse<TData>>;
+  query: QueryObserverResult<GetListResponse<TData>, TError>;
 };
 
 type UseRadioGroupProps<TQueryFnData, TError, TData> = Omit<
@@ -50,47 +50,40 @@ export const useRadioGroup = <
   TOption extends BaseOption = BaseOption,
 >({
   resource,
-  sort,
   sorters,
   filters,
   optionLabel,
   optionValue,
   queryOptions,
-  fetchSize,
   pagination,
   liveMode,
   defaultValue,
+  selectedOptionsOrder,
   onLiveEvent,
   liveParams,
   meta,
-  metaData,
   dataProviderName,
+  ...rest
 }: UseRadioGroupProps<TQueryFnData, TError, TData>): UseRadioGroupReturnType<
   TData,
   TOption
 > => {
-  const { queryResult, options } = useSelect<
-    TQueryFnData,
-    TError,
-    TData,
-    TOption
-  >({
+  const { query, options } = useSelect<TQueryFnData, TError, TData, TOption>({
     resource,
-    sort,
     sorters,
     filters,
     optionLabel,
     optionValue,
     queryOptions,
-    fetchSize,
     pagination,
     liveMode,
     defaultValue,
+    selectedOptionsOrder,
     onLiveEvent,
     liveParams,
-    meta: pickNotDeprecated(meta, metaData),
-    metaData: pickNotDeprecated(meta, metaData),
+    meta,
     dataProviderName,
+    ...rest,
   });
 
   return {
@@ -98,6 +91,6 @@ export const useRadioGroup = <
       options,
       defaultValue,
     },
-    queryResult,
+    query,
   };
 };

package/src/hooks/fields/useSelect/index.ts

@@ -1,23 +1,24 @@
-import { SelectProps } from "antd/lib/select";
-import { QueryObserverResult } from "@tanstack/react-query";
+import type { SelectProps } from "antd/lib/select";
+import type { QueryObserverResult } from "@tanstack/react-query";
 
 import {
   useSelect as useSelectCore,
-  BaseRecord,
-  GetManyResponse,
-  GetListResponse,
-  HttpError,
-  UseSelectProps,
-  BaseOption,
+  type BaseRecord,
+  type GetManyResponse,
+  type GetListResponse,
+  type HttpError,
+  type UseSelectProps,
+  type BaseOption,
 } from "@refinedev/core";
 
 export type UseSelectReturnType<
   TData extends BaseRecord = BaseRecord,
   TOption extends BaseOption = BaseOption,
+  TError extends HttpError = HttpError,
 > = {
   selectProps: SelectProps<TOption>;
-  queryResult: QueryObserverResult<GetListResponse<TData>>;
-  defaultValueQueryResult: QueryObserverResult<GetManyResponse<TData>>;
+  query: QueryObserverResult<GetListResponse<TData>, TError>;
+  defaultValueQuery: QueryObserverResult<GetManyResponse<TData>, TError>;
 };
 
 /**
@@ -39,18 +40,22 @@ export const useSelect = <
 >(
   props: UseSelectProps<TQueryFnData, TError, TData>,
 ): UseSelectReturnType<TData, TOption> => {
-  const { queryResult, defaultValueQueryResult, onSearch, options } =
-    useSelectCore<TQueryFnData, TError, TData, TOption>(props);
+  const { query, defaultValueQuery, onSearch, options } = useSelectCore<
+    TQueryFnData,
+    TError,
+    TData,
+    TOption
+  >(props);
 
   return {
     selectProps: {
       options,
       onSearch,
-      loading: defaultValueQueryResult.isFetching,
+      loading: defaultValueQuery.query.isFetching,
       showSearch: true,
       filterOption: false,
     },
-    queryResult,
-    defaultValueQueryResult,
+    query,
+    defaultValueQuery: defaultValueQuery.query,
   };
 };

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

@@ -1,26 +1,25 @@
 import React, { useCallback } from "react";
-import { UseFormConfig } from "sunflower-antd";
-import { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
+import type { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
 import {
   useTranslate,
   useWarnAboutChange,
-  UseFormProps as UseFormPropsCore,
-  HttpError,
-  LiveModeProps,
-  BaseRecord,
-  FormWithSyncWithLocationParams,
-  BaseKey,
-  useResource,
+  type UseFormProps as UseFormPropsCore,
+  type HttpError,
+  type LiveModeProps,
+  type BaseRecord,
+  type FormWithSyncWithLocationParams,
+  type BaseKey,
+  useResourceParams,
   useParsed,
   useGo,
-  useModal,
   useInvalidate,
 } from "@refinedev/core";
 
-import { useForm, UseFormProps, UseFormReturnType } from "../useForm";
-import { DeleteButtonProps } from "../../../components";
+import { useForm, type UseFormProps, type UseFormReturnType } from "../useForm";
+import type { DeleteButtonProps } from "../../../components";
+import { useDrawer } from "@hooks/drawer";
 
-export interface UseDrawerFormConfig extends UseFormConfig {
+export interface UseDrawerFormConfig {
   action: "show" | "edit" | "create" | "clone";
 }
 
@@ -107,6 +106,7 @@ export const useDrawerForm = <
   autoResetForm = true,
   autoSave,
   invalidates,
+
   ...rest
 }: UseDrawerFormProps<
   TQueryFnData,
@@ -126,19 +126,23 @@ export const useDrawerForm = <
   const invalidate = useInvalidate();
   const [initiallySynced, setInitiallySynced] = React.useState(false);
 
-  const { visible, show, close } = useModal({
-    defaultVisible,
+  const { show, close, drawerProps } = useDrawer({
+    drawerProps: {
+      open: defaultVisible,
+    },
   });
+  const visible = drawerProps.open || false;
 
   const {
     resource,
     action: actionFromParams,
     identifier,
-  } = useResource(rest.resource);
+  } = useResourceParams({
+    resource: rest.resource,
+  });
 
   const parsed = useParsed();
   const go = useGo();
-
   const action = rest.action ?? actionFromParams ?? "";
 
   const syncingId = !(
@@ -313,6 +317,7 @@ export const useDrawerForm = <
       },
     },
     drawerProps: {
+      ...drawerProps,
       width: "500px",
       onClose: handleClose,
       open: visible,

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));