@refinedev/antd 5.5.2 → 5.7.0

package/src/components/themedLayoutV2/title/index.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
+import { Typography, theme, Space } from "antd";
+import { RefineLayoutThemedTitleProps } from "../types";
+
+const { useToken } = theme;
+
+const defaultText = "refine Project";
+
+const defaultIcon = (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        data-testid="refine-logo"
+    >
+        <path
+            d="M12 9C13.6569 9 15 7.65685 15 6C15 4.34315 13.6569 3 12 3C10.3431 3 9 4.34315 9 6C9 7.65685 10.3431 9 12 9Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V18C16 20.2091 14.2091 22 12 22C9.79086 22 8 20.2091 8 18V6Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+export const ThemedTitleV2: React.FC<RefineLayoutThemedTitleProps> = ({
+    collapsed,
+    icon = defaultIcon,
+    text = defaultText,
+    wrapperStyles,
+}) => {
+    const { token } = useToken();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    return (
+        <ActiveLink
+            to="/"
+            style={{
+                display: "inline-block",
+                textDecoration: "none",
+            }}
+        >
+            <Space
+                style={{
+                    display: "flex",
+                    alignItems: "center",
+                    fontSize: "inherit",
+                    ...wrapperStyles,
+                }}
+            >
+                <div
+                    style={{
+                        height: "24px",
+                        width: "24px",
+                        color: token.colorPrimary,
+                    }}
+                >
+                    {icon}
+                </div>
+
+                {!collapsed && (
+                    <Typography.Title
+                        style={{
+                            fontSize: "inherit",
+                            marginBottom: 0,
+                            fontWeight: 700,
+                        }}
+                    >
+                        {text}
+                    </Typography.Title>
+                )}
+            </Space>
+        </ActiveLink>
+    );
+};

package/src/components/themedLayoutV2/types.ts

@@ -0,0 +1,13 @@
+import type {
+    RefineThemedLayoutV2SiderProps,
+    RefineThemedLayoutV2HeaderProps,
+    RefineThemedLayoutV2Props,
+    RefineLayoutThemedTitleProps,
+} from "@refinedev/ui-types";
+
+export type {
+    RefineLayoutThemedTitleProps,
+    RefineThemedLayoutV2SiderProps,
+    RefineThemedLayoutV2HeaderProps,
+    RefineThemedLayoutV2Props,
+};

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+export {
+    ThemedLayoutContext,
+    ThemedLayoutContextProvider,
+} from "./themedLayoutContext";

package/src/contexts/themedLayoutContext/IThemedLayoutContext.ts

@@ -0,0 +1,6 @@
+export interface IThemedLayoutContext {
+    siderVisible: boolean;
+    drawerSiderVisible: boolean;
+    setSiderVisible?: (visible: boolean) => void;
+    setDrawerSiderVisible?: (visible: boolean) => void;
+}

package/src/contexts/themedLayoutContext/index.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode, useState } from "react";
+
+import { IThemedLayoutContext } from "./IThemedLayoutContext";
+
+export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
+    siderVisible: false,
+    drawerSiderVisible: true,
+});
+
+export const ThemedLayoutContextProvider: React.FC<{ children: ReactNode }> = ({
+    children,
+}) => {
+    const [siderVisible, setSiderVisible] = useState(false);
+    const [drawerSiderVisible, setDrawerSiderVisible] = useState(true);
+
+    return (
+        <ThemedLayoutContext.Provider
+            value={{
+                siderVisible,
+                drawerSiderVisible,
+                setSiderVisible,
+                setDrawerSiderVisible,
+            }}
+        >
+            {children}
+        </ThemedLayoutContext.Provider>
+    );
+};

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

@@ -17,17 +17,8 @@ export type UseCheckboxGroupReturnType<TData extends BaseRecord = BaseRecord> =
         queryResult: QueryObserverResult<GetListResponse<TData>>;
     };
 
-/**
- * `useCheckboxGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/checkbox/#components-checkbox-demo-group Checkbox.Group} component when records in a resource needs to be used as checkbox options.
- *
- * @see {@link https://refine.dev/docs/ui-framewors/antd/hooks/field/useCheckboxGroup} for more details.
- *
- * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
- *
- */
-
-type UseCheckboxGroupProps<TData, TError> = Omit<
-    UseSelectProps<TData, TError>,
+type UseCheckboxGroupProps<TQueryFnData, TError, TData> = Omit<
+    UseSelectProps<TQueryFnData, TError, TData>,
     "defaultValue"
 > & {
     /**
@@ -36,9 +27,21 @@ type UseCheckboxGroupProps<TData, TError> = Omit<
     defaultValue?: BaseKey[];
 };
 
+/**
+ * `useCheckboxGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/checkbox/#components-checkbox-demo-group Checkbox.Group} component when records in a resource needs to be used as checkbox options.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/antd/hooks/field/useCheckboxGroup/} for more details
+ *
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#httperror `HttpError`}
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
+ *
+ */
+
 export const useCheckboxGroup = <
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
+    TData extends BaseRecord = TQueryFnData,
 >({
     resource,
     sort,
@@ -56,7 +59,11 @@ export const useCheckboxGroup = <
     meta,
     metaData,
     dataProviderName,
-}: UseCheckboxGroupProps<TData, TError>): UseCheckboxGroupReturnType<TData> => {
+}: UseCheckboxGroupProps<
+    TQueryFnData,
+    TError,
+    TData
+>): UseCheckboxGroupReturnType<TData> => {
     const { queryResult, options } = useSelect({
         resource,
         sort,

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

@@ -16,17 +16,8 @@ export type UseRadioGroupReturnType<TData extends BaseRecord = BaseRecord> = {
     queryResult: QueryObserverResult<GetListResponse<TData>>;
 };
 
-/**
- * `useRadioGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/radio/#components-radio-demo-radiogroup-with-name Radio.Group} component when records in a resource needs to be used as radio options.
- *
- * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/field/useRadioGroup} for more details.
- *
- * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/core/interfaceReferences#baserecord `BaseRecord`}
- *
- */
-
-type UseRadioGroupProps<TData, TError> = Omit<
-    UseSelectProps<TData, TError>,
+type UseRadioGroupProps<TQueryFnData, TError, TData> = Omit<
+    UseSelectProps<TQueryFnData, TError, TData>,
     "defaultValue"
 > & {
     /**
@@ -35,9 +26,21 @@ type UseRadioGroupProps<TData, TError> = Omit<
     defaultValue?: BaseKey;
 };
 
+/**
+ * `useRadioGroup` hook allows you to manage an Ant Design {@link https://ant.design/components/radio/#components-radio-demo-radiogroup-with-name Radio.Group} component when records in a resource needs to be used as radio options.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/antd/hooks/field/useRadioGroup/} for more details.
+ *
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#httperror `HttpError`}
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
+ *
+ */
+
 export const useRadioGroup = <
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
+    TData extends BaseRecord = TQueryFnData,
 >({
     resource,
     sort,
@@ -55,7 +58,11 @@ export const useRadioGroup = <
     meta,
     metaData,
     dataProviderName,
-}: UseRadioGroupProps<TData, TError>): UseRadioGroupReturnType<TData> => {
+}: UseRadioGroupProps<
+    TQueryFnData,
+    TError,
+    TData
+>): UseRadioGroupReturnType<TData> => {
     const { queryResult, options } = useSelect({
         resource,
         sort,

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

@@ -19,16 +19,20 @@ export type UseSelectReturnType<TData extends BaseRecord = BaseRecord> = {
 /**
  * `useSelect` hook allows you to manage an Ant Design {@link https://ant.design/components/select/ Select} component when records in a resource needs to be used as select options.
  *
- * @see {@link https://refine.dev/docs/api-references/hooks/field/useSelect} for more details.
+ * @see {@link https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/} for more details.
  *
- * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#httperror `HttpError`}
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
  *
  */
+
 export const useSelect = <
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
+    TData extends BaseRecord = TQueryFnData,
 >(
-    props: UseSelectProps<TData, TError>,
+    props: UseSelectProps<TQueryFnData, TError, TData>,
 ): UseSelectReturnType<TData> => {
     const { queryResult, defaultValueQueryResult, onSearch, options } =
         useSelectCore(props);

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

@@ -27,8 +27,9 @@ export type UseDrawerFormProps<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormPropsCore<TData, TError, TVariables> &
-    UseFormProps<TData, TError, TVariables> &
+    TSelectData extends BaseRecord = TData,
+> = UseFormPropsCore<TData, TError, TVariables, TSelectData> &
+    UseFormProps<TData, TError, TVariables, TSelectData> &
     UseDrawerFormConfig &
     LiveModeProps &
     FormWithSyncWithLocationParams & {
@@ -41,7 +42,8 @@ export type UseDrawerFormReturnType<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormReturnType<TData, TError, TVariables> & {
+    TSelectData extends BaseRecord = TData,
+> = UseFormReturnType<TData, TError, TVariables, TSelectData> & {
     formProps: FormProps<TVariables> & {
         form: FormInstance<TVariables>;
     };
@@ -69,24 +71,26 @@ export const useDrawerForm = <
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
+    TSelectData extends BaseRecord = TData,
 >({
     syncWithLocation,
     defaultVisible = false,
     autoSubmitClose = true,
     autoResetForm = true,
     ...rest
-}: UseDrawerFormProps<TData, TError, TVariables>): UseDrawerFormReturnType<
+}: UseDrawerFormProps<
     TData,
     TError,
-    TVariables
-> => {
+    TVariables,
+    TSelectData
+>): UseDrawerFormReturnType<TData, TError, TVariables, TSelectData> => {
     const initiallySynced = React.useRef(false);
 
     const { visible, show, close } = useModal({
         defaultVisible,
     });
 
-    const useFormProps = useForm<TData, TError, TVariables>({
+    const useFormProps = useForm<TData, TError, TVariables, TSelectData>({
         ...rest,
     });
 

package/src/hooks/form/useForm.ts

@@ -19,7 +19,8 @@ export type UseFormProps<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormPropsCore<TData, TError, TVariables> & {
+    TSelectData extends BaseRecord = TData,
+> = UseFormPropsCore<TData, TError, TVariables, TSelectData> & {
     submitOnEnter?: boolean;
     /**
      * Shows notification when unsaved changes exist
@@ -31,7 +32,8 @@ export type UseFormReturnType<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormReturnTypeCore<TData, TError, TVariables> & {
+    TSelectData extends BaseRecord = TData,
+> = UseFormReturnTypeCore<TData, TError, TVariables, TSelectData> & {
     form: FormInstance<TVariables>;
     formProps: FormProps<TVariables>;
     saveButtonProps: ButtonProps & {
@@ -57,6 +59,7 @@ export const useForm = <
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
+    TSelectData extends BaseRecord = TData,
 >({
     action,
     resource,
@@ -80,18 +83,24 @@ export const useForm = <
     createMutationOptions,
     updateMutationOptions,
     id: idFromProps,
-}: UseFormProps<TData, TError, TVariables> = {}): UseFormReturnType<
+}: UseFormProps<
     TData,
     TError,
-    TVariables
-> => {
+    TVariables,
+    TSelectData
+> = {}): UseFormReturnType<TData, TError, TVariables, TSelectData> => {
     const [formAnt] = Form.useForm();
     const formSF = useFormSF<TData, TVariables>({
         form: formAnt,
     });
     const { form } = formSF;
 
-    const useFormCoreResult = useFormCore<TData, TError, TVariables>({
+    const useFormCoreResult = useFormCore<
+        TData,
+        TError,
+        TVariables,
+        TSelectData
+    >({
         onMutationSuccess: onMutationSuccessProp
             ? onMutationSuccessProp
             : undefined,

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

@@ -46,18 +46,20 @@ export type UseModalFormReturnType<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
+    TSelectData extends BaseRecord = TData,
 > = Omit<
-    UseFormReturnType<TData, TError, TVariables>,
+    UseFormReturnType<TData, TError, TVariables, TSelectData>,
     "saveButtonProps" | "deleteButtonProps"
 > &
-    useModalFormFromSFReturnType<TData, TVariables>;
+    useModalFormFromSFReturnType<TSelectData, TVariables>;
 
 export type UseModalFormProps<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormPropsCore<TData, TError, TVariables> &
-    UseFormProps<TData, TError, TVariables> &
+    TSelectData extends BaseRecord = TData,
+> = UseFormPropsCore<TData, TError, TVariables, TSelectData> &
+    UseFormProps<TData, TError, TVariables, TSelectData> &
     UseModalFormConfigSF &
     useModalFormConfig &
     LiveModeProps &
@@ -77,17 +79,19 @@ export const useModalForm = <
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
+    TSelectData extends BaseRecord = TData,
 >({
     syncWithLocation,
     ...rest
-}: UseModalFormProps<TData, TError, TVariables>): UseModalFormReturnType<
+}: UseModalFormProps<
     TData,
     TError,
-    TVariables
-> => {
+    TVariables,
+    TSelectData
+>): UseModalFormReturnType<TData, TError, TVariables, TSelectData> => {
     const initiallySynced = React.useRef(false);
 
-    const useFormProps = useForm<TData, TError, TVariables>({
+    const useFormProps = useForm<TData, TError, TVariables, TSelectData>({
         ...rest,
     });
 
@@ -114,7 +118,7 @@ export const useModalForm = <
 
     const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const sunflowerUseModal = useModalFormSF<TData, TVariables>({
+    const sunflowerUseModal = useModalFormSF<TSelectData, TVariables>({
         ...rest,
         form: form,
         submit: onFinish as any,

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

@@ -33,15 +33,17 @@ export type UseStepsFormReturnType<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormReturnType<TData, TError, TVariables> &
-    UseStepsFormFromSFReturnType<TData, TVariables>;
+    TSelectData extends BaseRecord = TData,
+> = UseFormReturnType<TData, TError, TVariables, TSelectData> &
+    UseStepsFormFromSFReturnType<TSelectData, TVariables>;
 
 export type UseStepsFormProps<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
-> = UseFormPropsCore<TData, TError, TVariables> &
-    UseFormProps<TData, TError, TVariables> &
+    TSelectData extends BaseRecord = TData,
+> = UseFormPropsCore<TData, TError, TVariables, TSelectData> &
+    UseFormProps<TData, TError, TVariables, TSelectData> &
     UseStepsFormConfig;
 
 /**
@@ -59,13 +61,16 @@ export const useStepsForm = <
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
+    TSelectData extends BaseRecord = TData,
 >(
-    props: UseStepsFormProps<TData, TError, TVariables> = {},
-): UseStepsFormReturnType<TData, TError, TVariables> => {
-    const useFormProps = useForm<TData, TError, TVariables>({ ...props });
+    props: UseStepsFormProps<TData, TError, TVariables, TSelectData> = {},
+): UseStepsFormReturnType<TData, TError, TVariables, TSelectData> => {
+    const useFormProps = useForm<TData, TError, TVariables, TSelectData>({
+        ...props,
+    });
     const { form, formProps } = useFormProps;
 
-    const stepsPropsSunflower = useStepsFormSF<TData, TVariables>({
+    const stepsPropsSunflower = useStepsFormSF<TSelectData, TVariables>({
         isBackValidate: false,
         form: form,
         submit: (values: any) => {

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from "./import";
 export * from "./list";
 export * from "./useFileUploadState";
 export * from "./modal";
+export * from "./useSiderVisible";

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

@@ -14,16 +14,17 @@ import { useLiveMode } from "@refinedev/core";
 import { PaginationLink } from "@hooks/table/useTable/paginationLink";
 import { PaginationConfig } from "antd/lib/pagination";
 
-export type useSimpleListProps<TData, TError, TSearchVariables> =
-    useTablePropsCore<TData, TError> & {
+export type useSimpleListProps<TQueryFnData, TError, TSearchVariables, TData> =
+    useTablePropsCore<TQueryFnData, TError, TData> & {
         onSearch?: (
             data: TSearchVariables,
         ) => CrudFilters | Promise<CrudFilters>;
     };
 
 export type useSimpleListReturnType<
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TSearchVariables = unknown,
+    TData extends BaseRecord = TQueryFnData,
 > = Omit<useTableReturnType<TData>, "tableQueryResult"> & {
     listProps: ListProps<TData>;
     queryResult: useTableReturnType["tableQueryResult"];
@@ -36,16 +37,18 @@ export type useSimpleListReturnType<
  *
  * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/list/useSimpleList} for more details.
  *
- * @typeParam TData - Result data of the query extends {@link https://refine.dev/docs/api-references/interfaceReferences#baserecord `BaseRecord`}
- * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-references/interfaceReferences#httperror `HttpError`}
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#httperror `HttpError`}
  * @typeParam TSearchVariables - Antd form values
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
  *
  */
 
 export const useSimpleList = <
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TSearchVariables = unknown,
+    TData extends BaseRecord = TQueryFnData,
 >({
     resource,
     initialCurrent,
@@ -71,9 +74,10 @@ export const useSimpleList = <
     metaData,
     dataProviderName,
 }: useSimpleListProps<
-    TData,
+    TQueryFnData,
     TError,
-    TSearchVariables
+    TSearchVariables,
+    TData
 > = {}): useSimpleListReturnType<TData, TSearchVariables> => {
     const {
         sorters,

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

@@ -6,12 +6,13 @@ import { useTableProps, useTableReturnType } from "../useTable";
 import { UseFormReturnType, useForm } from "../../form/useForm";
 
 export type useEditableTableReturnType<
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
     TSearchVariables = unknown,
+    TData extends BaseRecord = TQueryFnData,
 > = useTableReturnType<TData, TError, TSearchVariables> &
-    UseFormReturnType<TData, TError, TVariables> & {
+    UseFormReturnType<TQueryFnData, TError, TVariables> & {
         saveButtonProps: ButtonProps & {
             onClick: () => void;
         };
@@ -25,43 +26,59 @@ export type useEditableTableReturnType<
     };
 
 type useEditableTableProps<
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
     TSearchVariables = unknown,
+    TData extends BaseRecord = TQueryFnData,
 > = Omit<
-    useTableProps<TData, TError, TSearchVariables>,
+    useTableProps<TQueryFnData, TError, TSearchVariables, TData>,
     "successNotification" | "errorNotification"
 > &
-    UseFormProps<TData, TError, TVariables>;
+    UseFormProps<TQueryFnData, TError, TVariables>;
 
 /**
  * `useEditeableTable` allows you to implement edit feature on the table with ease,
- * on top of all the features that {@link https://refine.dev/docs/api-references/hooks/table/useTable `useTable`} provides.
+ * on top of all the features that {@link https://refine.dev/docs/api-reference/core/hooks/useTable/ `useTable`} provides.
  * `useEditableTable` return properties that can be used on Ant Design's {@link https://ant.design/components/table/ `<Table>`}
  * and {@link https://ant.design/components/form/ `<Form>`} components.
  *
- * @see {@link https://refine.dev/docs/ui-frameworks/antd/hooks/table/useEditableTable} for more details.
+ * @see {@link https://refine.dev/docs/api-reference/antd/hooks/table/useTable/} for more details.
+ *
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#httperror `HttpError`}
+ * @typeParam TVariables - Values for params
+ * @typeParam TSearchVariables - Values for search params
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/api-reference/core/interfaceReferences#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
+ *
  */
 export const useEditableTable = <
-    TData extends BaseRecord = BaseRecord,
+    TQueryFnData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
     TVariables = {},
     TSearchVariables = unknown,
+    TData extends BaseRecord = TQueryFnData,
 >(
     props: useEditableTableProps<
-        TData,
+        TQueryFnData,
         TError,
         TVariables,
-        TSearchVariables
+        TSearchVariables,
+        TData
     > = {},
-): useEditableTableReturnType<TData, TError, TVariables, TSearchVariables> => {
-    const table = useTable<TData, TError, TSearchVariables>({
+): useEditableTableReturnType<
+    TQueryFnData,
+    TError,
+    TVariables,
+    TSearchVariables,
+    TData
+> => {
+    const table = useTable<TQueryFnData, TError, TSearchVariables, TData>({
         ...props,
         successNotification: undefined,
         errorNotification: undefined,
     });
-    const edit = useForm<TData, TError, TVariables>({
+    const edit = useForm<TQueryFnData, TError, TVariables>({
         ...props,
         action: "edit",
         redirect: false,