@refinedev/antd 5.38.0 → 5.39.0

package/src/components/undoableNotification/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Progress } from "antd";
-import { OpenNotificationParams } from "@refinedev/core";
+import type { OpenNotificationParams } from "@refinedev/core";
 import { UndoOutlined } from "@ant-design/icons";
 
 export type UndoableNotificationProps = {
@@ -36,6 +36,7 @@ export const UndoableNotification: React.FC<UndoableNotificationProps> = ({
       style={{ flexShrink: 0 }}
       onClick={cancelMutation}
       disabled={undoableTimeout === 0}
+      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<UndoOutlined />}
     />
   </div>

package/src/contexts/themedLayoutContext/index.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode, useState } from "react";
+import React, { type ReactNode, useState } from "react";
 
-import { IThemedLayoutContext } from "./IThemedLayoutContext";
+import type { IThemedLayoutContext } from "./IThemedLayoutContext";
 
 export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
   siderCollapsed: false,

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"]>

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/fields/useCheckboxGroup/index.ts

@@ -1,15 +1,15 @@
-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,
+  type BaseKey,
   pickNotDeprecated,
-  BaseOption,
+  type BaseOption,
 } from "@refinedev/core";
 
 export type UseCheckboxGroupReturnType<

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

@@ -1,15 +1,15 @@
-import { QueryObserverResult } from "@tanstack/react-query";
+import type { QueryObserverResult } from "@tanstack/react-query";
 import type { Radio } from "antd";
 
 import {
-  BaseKey,
-  BaseOption,
-  BaseRecord,
-  GetListResponse,
-  HttpError,
+  type BaseKey,
+  type BaseOption,
+  type BaseRecord,
+  type GetListResponse,
+  type HttpError,
   pickNotDeprecated,
   useSelect,
-  UseSelectProps,
+  type UseSelectProps,
 } from "@refinedev/core";
 
 export type UseRadioGroupReturnType<

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

@@ -1,14 +1,14 @@
-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<

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

@@ -1,15 +1,15 @@
 import React, { useCallback } from "react";
-import { UseFormConfig } from "sunflower-antd";
-import { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
+import type { UseFormConfig } from "sunflower-antd";
+import type { FormInstance, FormProps, DrawerProps, ButtonProps } from "antd";
 import {
   useTranslate,
   useWarnAboutChange,
-  UseFormProps as UseFormPropsCore,
-  HttpError,
-  LiveModeProps,
-  BaseRecord,
-  FormWithSyncWithLocationParams,
-  BaseKey,
+  type UseFormProps as UseFormPropsCore,
+  type HttpError,
+  type LiveModeProps,
+  type BaseRecord,
+  type FormWithSyncWithLocationParams,
+  type BaseKey,
   useResource,
   useParsed,
   useGo,
@@ -17,8 +17,8 @@ import {
   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";
 
 export interface UseDrawerFormConfig extends UseFormConfig {
   action: "show" | "edit" | "create" | "clone";

package/src/hooks/form/useForm.ts

@@ -1,21 +1,26 @@
 import React from "react";
-import { FormInstance, FormProps, Form, ButtonProps } from "antd";
+import {
+  type FormInstance,
+  type FormProps,
+  Form,
+  type ButtonProps,
+} from "antd";
 import { useForm as useFormSF } from "sunflower-antd";
 import {
-  AutoSaveProps,
+  type AutoSaveProps,
   flattenObjectKeys,
   propertyPathToArray,
 } from "@refinedev/core";
 
 import {
-  HttpError,
-  BaseRecord,
+  type HttpError,
+  type BaseRecord,
   useForm as useFormCore,
-  UseFormReturnType as UseFormReturnTypeCore,
+  type UseFormReturnType as UseFormReturnTypeCore,
   useWarnAboutChange,
-  UseFormProps as UseFormPropsCore,
-  CreateResponse,
-  UpdateResponse,
+  type UseFormProps as UseFormPropsCore,
+  type CreateResponse,
+  type UpdateResponse,
   pickNotDeprecated,
   useTranslate,
   useRefineContext,

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,
+  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> = {

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,13 +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,
+  type BaseRecord,
+  type HttpError,
   useImport as useImportCore,
-  UseImportReturnType,
-  ImportOptions,
+  type UseImportReturnType,
+  type ImportOptions,
   pickNotDeprecated,
 } from "@refinedev/core";
 

package/src/hooks/list/useSimpleList/useSimpleList.ts

@@ -1,18 +1,18 @@
 import { Children, createElement, Fragment } from "react";
-import { ListProps, FormProps, Form, Grid } from "antd";
+import { type ListProps, type FormProps, Form, Grid } from "antd";
 
 import {
-  BaseRecord,
-  CrudFilters,
-  HttpError,
+  type BaseRecord,
+  type CrudFilters,
+  type HttpError,
   useTable as useTableCore,
-  useTableProps as useTablePropsCore,
-  useTableReturnType,
+  type useTableProps as useTablePropsCore,
+  type useTableReturnType,
   pickNotDeprecated,
 } from "@refinedev/core";
 import { useLiveMode } from "@refinedev/core";
 import { PaginationLink } from "@hooks/table/useTable/paginationLink";
-import { PaginationConfig } from "antd/lib/pagination";
+import type { PaginationConfig } from "antd/lib/pagination";
 
 export type useSimpleListProps<TQueryFnData, TError, TSearchVariables, TData> =
   useTablePropsCore<TQueryFnData, TError, TData> & {

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,

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

@@ -1,5 +1,5 @@
 import { useLink, useRouterContext, useRouterType } from "@refinedev/core";
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 
 interface PaginationLinkProps {
   to: string;

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

@@ -1,16 +1,23 @@
 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,
+  type useTableProps as useTablePropsCore,
+  type useTableReturnType as useTableCoreReturnType,
   pickNotDeprecated,
+  useSyncWithLocation,
 } from "@refinedev/core";
 
 import {
@@ -18,7 +25,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> & {
@@ -122,6 +129,8 @@ export const useTable = <
     metaData: pickNotDeprecated(meta, metaData),
     dataProviderName,
   });
+  const { syncWithLocation: defaultSyncWithLocation } = useSyncWithLocation();
+  const shouldSyncWithLocation = syncWithLocation ?? defaultSyncWithLocation;
   const breakpoint = Grid.useBreakpoint();
   const [form] = Form.useForm<TSearchVariables>();
   const formSF = useFormSF<any, TSearchVariables>({
@@ -140,6 +149,33 @@ export const useTable = <
 
   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,
     tableFilters: Record<string, FilterValue | null>,

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;

package/src/hooks/useThemedLayoutContext/index.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 
 import { ThemedLayoutContext } from "@contexts";
-import { IThemedLayoutContext } from "@contexts/themedLayoutContext/IThemedLayoutContext";
+import type { IThemedLayoutContext } from "@contexts/themedLayoutContext/IThemedLayoutContext";
 
 export type UseThemedLayoutContextType = IThemedLayoutContext;
 

package/src/index.tsx

@@ -1,14 +1,15 @@
-export * from "./hooks/index.ts";
-export * from "./providers/index.ts";
-export * from "./components/index.ts";
-export * from "./contexts/index.ts";
+export * from "./hooks/index.js";
+export * from "./providers/index.js";
+export * from "./components/index.js";
+export * from "./contexts/index.js";
 
 export {
   getDefaultSortOrder,
   getDefaultFilter,
   mapAntdSorterToCrudSorting,
   mapAntdFilterToCrudFilter,
-} from "./definitions/table/index.ts";
-export { getValueFromEvent } from "./definitions/upload/index.ts";
+} from "./definitions/table/index.js";
+export { rangePickerFilterMapper } from "./definitions/filter-mappers/index.js";
+export { getValueFromEvent } from "./definitions/upload/index.js";
 
-export * from "./definitions/themes/index.ts";
+export * from "./definitions/themes/index.js";

package/src/interfaces/index.ts

@@ -1,4 +1,4 @@
-import { IResourceItem } from "@refinedev/core";
+import type { IResourceItem } from "@refinedev/core";
 
 export type BaseRecord = {
   id?: string;

package/src/providers/notificationProvider/index.tsx

@@ -1,4 +1,4 @@
-import { NotificationProvider } from "@refinedev/core";
+import type { NotificationProvider } from "@refinedev/core";
 import { App, notification as staticNotification } from "antd";
 import React from "react";
 

package/src/types/sunflower.d.ts

@@ -1,5 +1,5 @@
-import { FormInstance, FormProps } from "antd";
-import { UseFormConfig, UseModalFormConfig } from "sunflower-antd";
+import type { FormInstance, FormProps } from "antd";
+import type { UseFormConfig, UseModalFormConfig } from "sunflower-antd";
 export interface UseStepsFormConfig
   extends Omit<UseFormConfig, "defaultFormValues"> {
   defaultCurrent?: number;