fix(docs): doc examples uses refine4

documentation/docs/advanced-tutorials/mutation-mode.md

@@ -46,7 +46,7 @@ import {
 } from "antd";
 
 const PostList: React.FC = () => {
-  const { tableProps, sorter } = RefineAntdUseTable<IPost>({
+  const { tableProps } = RefineAntdUseTable<IPost>({
     sorters: {
       initial: [
         {

documentation/docs/advanced-tutorials/real-time.md

@@ -219,7 +219,7 @@ Firstly, let's implement a custom sider like in [this example](https://github.co
 ```tsx title="src/components/sider.tsx"
 import React, { useState } from "react";
 import {
-  ITreeMenu,
+  TreeMenuItem,
   CanAccess,
   useIsExistAuthentication,
   useTranslate,
@@ -255,48 +255,47 @@ export const CustomSider: typeof Sider = ({ render }) => {
   const isMobile =
     typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
 
-  const renderTreeView = (tree: ITreeMenu[], selectedKey: string) => {
-    return tree.map((item: ITreeMenu) => {
-      const { name, children, meta, key, list } = item;
+  const renderTreeView = (tree: TreeMenuItem[], selectedKey: string) => {
+    return tree.map((item: TreeMenuItem) => {
+      const { name, children, meta, key, route } = item;
 
       const icon = meta?.icon;
       const label = meta?.label ?? name;
       const parent = meta?.parent;
-      const route =
-        typeof list === "string"
-          ? list
-          : typeof list !== "function"
-          ? list?.path
-          : key;
+      const resolvedRoute = route ?? key;
 
       if (children.length > 0) {
         return (
           <SubMenu
-            key={route}
+            key={resolvedRoute}
             icon={icon ?? <UnorderedListOutlined />}
             title={label}
           >
             {renderTreeView(children, selectedKey)}
           </SubMenu>
         );
       }
-      const isSelected = route === selectedKey;
+      const isSelected = resolvedRoute === selectedKey;
       const isRoute = !(parent !== undefined && children.length === 0);
       return (
         <CanAccess
-          key={route}
+          key={resolvedRoute}
           resource={name}
           action="list"
           params={{ resource: item }}
         >
           <Menu.Item
-            key={route}
+            key={resolvedRoute}
             style={{
               textTransform: "capitalize",
             }}
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
-            {route ? <Link to={route || "/"}>{label}</Link> : label}
+            {resolvedRoute ? (
+              <Link to={resolvedRoute || "/"}>{label}</Link>
+            ) : (
+              label
+            )}
             {!collapsed && isSelected && (
               <div className="ant-menu-tree-arrow" />
             )}
@@ -439,7 +438,7 @@ Now, let's add a badge for the number of create and update events for **_posts_*
 ```tsx
 import React, { useState } from "react";
 import {
-  ITreeMenu,
+  TreeMenuItem,
   CanAccess,
   useIsExistAuthentication,
   useTranslate,
@@ -484,49 +483,48 @@ export const CustomSider: typeof Sider = ({ render }) => {
     onLiveEvent: () => setSubscriptionCount((prev) => prev + 1),
   });
 
-  const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
-    return tree.map((item: ITreeMenu) => {
-      const { name, children, meta, key, list } = item;
+  const renderTreeView = (tree: TreeMenuItem[], selectedKey?: string) => {
+    return tree.map((item: TreeMenuItem) => {
+      const { name, children, meta, key, route } = item;
 
       const icon = meta?.icon;
       const label = meta?.label ?? name;
       const parent = meta?.parent;
-      const route =
-        typeof list === "string"
-          ? list
-          : typeof list !== "function"
-          ? list?.path
-          : key;
+      const resolvedRoute = route ?? key;
 
       if (children.length > 0) {
         return (
           <SubMenu
-            key={key}
+            key={resolvedRoute}
             icon={icon ?? <UnorderedListOutlined />}
             title={label}
           >
             {renderTreeView(children, selectedKey)}
           </SubMenu>
         );
       }
-      const isSelected = route === selectedKey;
+      const isSelected = resolvedRoute === selectedKey;
       const isRoute = !(parent !== undefined && children.length === 0);
       return (
         <CanAccess
-          key={key}
+          key={resolvedRoute}
           resource={name}
           action="list"
           params={{ resource: item }}
         >
           <Menu.Item
-            key={route}
+            key={resolvedRoute}
             style={{
               textTransform: "capitalize",
             }}
             icon={icon ?? (isRoute && <UnorderedListOutlined />)}
           >
-            {route ? <Link to={route || "/"}>{label}</Link> : label}
-            {route && (
+            {resolvedRoute ? (
+              <Link to={resolvedRoute || "/"}>{label}</Link>
+            ) : (
+              label
+            )}
+            {resolvedRoute && (
               <>
                 {label.toLowerCase() === "posts" && (
                   <Badge

documentation/docs/advanced-tutorials/upload/multipart-upload.md

@@ -43,7 +43,7 @@ import {
 } from "antd";
 
 const PostList: React.FC = () => {
-    const { result, tableProps, sorter } = RefineAntdUseTable<IPost>();
+    const { result, tableProps } = RefineAntdUseTable<IPost>();
 
     const categoryIds = result?.data?.map((item) => item.category.id) ?? [];
 

documentation/docs/advanced-tutorials/web3/ethereum-signin.md

@@ -159,7 +159,7 @@ import { useLogin } from "@refinedev/core";
 
 export const Login: React.FC = () => {
   // highlight-next-line
-  const { mutate: login, isLoading } = useLogin();
+  const { mutate: login, isPending } = useLogin();
 
   return (
     <Layout
@@ -179,7 +179,7 @@ export const Login: React.FC = () => {
         <Button
           type="primary"
           size="middle"
-          loading={isLoading}
+          loading={isPending}
           onClick={() => login({})}
         >
           Sign in with Ethereum

documentation/docs/core/hooks/utilities/use-menu/index.md

@@ -41,7 +41,7 @@ setInitialRoutes(["/"]);
 
 // visible-block-start
 import React from "react";
-import { useMenu, LayoutProps, ITreeMenu } from "@refinedev/core";
+import { useMenu, LayoutProps, TreeMenuItem } from "@refinedev/core";
 
 import { Link } from "react-router";
 
@@ -51,7 +51,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   // highlight-end
 
   // highlight-start
-  const renderMenuItems = (items: ITreeMenu[]) => {
+  const renderMenuItems = (items: TreeMenuItem[]) => {
     return (
       <>
         {items.map(({ key, name, label, icon, route }) => {
@@ -219,15 +219,15 @@ Now you can update your `<Layout/>` to support multi level rendering with follow
 
 ```tsx title="src/components/Layout.tsx"
 import React from "react";
-import { useMenu, LayoutProps, ITreeMenu } from "@refinedev/core";
+import { useMenu, LayoutProps, TreeMenuItem } from "@refinedev/core";
 
 import { Link } from "react-router";
 
 export const Layout: React.FC<LayoutProps> = ({ children }) => {
   const { menuItems, selectedKey } = useMenu();
 
   // highlight-start
-  const renderMenuItems = (items: ITreeMenu[]) => {
+  const renderMenuItems = (items: TreeMenuItem[]) => {
     return (
       <>
         {items.map(({ key, name, label, icon, route, children, list }) => {

documentation/docs/data/hooks/use-create-many/index.md

@@ -36,7 +36,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```

documentation/docs/data/hooks/use-create/index.md

@@ -26,7 +26,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```
@@ -77,7 +77,7 @@ mutate({
 });
 
 // You can access mutation status through the mutation object
-if (mutation.isLoading) {
+if (mutation.isPending) {
   console.log("Creating product...");
 }
 
@@ -132,7 +132,7 @@ mutate({
 });
 
 // Access mutation state
-if (mutation.isLoading) {
+if (mutation.isPending) {
   // Handle loading state
 }
 
@@ -309,7 +309,7 @@ const { overtime, mutation } = useCreate();
 console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...
 
 // Also access mutation state
-console.log(mutation.isLoading); // true/false
+console.log(mutation.isPending); // true/false
 ```
 
 ## API Reference

documentation/docs/data/hooks/use-custom-mutation/index.md

@@ -42,7 +42,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```

documentation/docs/data/hooks/use-delete-many/index.md

@@ -27,7 +27,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```

documentation/docs/data/hooks/use-delete/index.md

@@ -23,7 +23,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```

documentation/docs/data/hooks/use-form/index.md

@@ -408,13 +408,13 @@ const { formLoading } = useForm({ ... });
 
 ### mutation
 
-Result of the mutation triggered by calling `onFinish`. Depending on the action, it will be the result of `useCreate` or `useUpdate` hooks. The mutation state can be accessed through `mutation.isLoading`, `mutation.data`, `mutation.error`, etc.
+Result of the mutation triggered by calling `onFinish`. Depending on the action, it will be the result of `useCreate` or `useUpdate` hooks. The mutation state can be accessed through `mutation.isPending`, `mutation.data`, `mutation.error`, etc.
 
 ```tsx
 const { mutation } = useForm({ ... });
 
 // Access mutation state
-if (mutation.isLoading) {
+if (mutation.isPending) {
   // Handle loading state
 }
 

documentation/docs/data/hooks/use-table/_partial-sorting-live-preview.md

@@ -49,12 +49,12 @@ const PostList: React.FC = () => {
       id: sorters.find((item) => item.field === "id")?.order || "desc",
       title: sorters.find((item) => item.field === "title")?.order || "asc",
     };
-  }, [sorter]);
+  }, [sorters]);
   // highlight-end
 
   // highlight-start
   const toggleSort = (field: string) => {
-    setSorter([
+    setSorters([
       {
         field,
         order: currentSorterOrders[field] === "asc" ? "desc" : "asc",

documentation/docs/data/hooks/use-update-many/index.md

@@ -32,7 +32,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```

documentation/docs/data/hooks/use-update/index.md

@@ -28,7 +28,7 @@ mutate({
 });
 
 // You can access mutation state through the mutation object:
-console.log(mutation.isLoading); // mutation loading state
+console.log(mutation.isPending); // mutation loading state
 console.log(mutation.data); // mutation response data
 console.log(mutation.error); // mutation error
 ```
@@ -80,7 +80,7 @@ mutate({
 });
 
 // You can access mutation status through the mutation object
-if (mutation.isLoading) {
+if (mutation.isPending) {
   console.log("Updating product...");
 }
 
@@ -107,7 +107,7 @@ mutate({
 });
 
 // Access mutation state
-if (mutation.isLoading) {
+if (mutation.isPending) {
   // Handle loading state
 }
 
@@ -487,7 +487,7 @@ const { overtime, mutation } = useUpdate();
 console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ...
 
 // Also access mutation state
-console.log(mutation.isLoading); // true/false
+console.log(mutation.isPending); // true/false
 ```
 
 ## API Reference

documentation/docs/data/packages/appwrite/index.md

@@ -84,7 +84,7 @@ import {
 } from "antd";
 
 const PostList: React.FC = () => {
-  const { result, tableProps, sorter } = RefineAntdUseTable<IPost>({
+  const { result, tableProps, sorters } = RefineAntdUseTable<IPost>({
     sorters: {
       initial: [
         {
@@ -114,7 +114,7 @@ const PostList: React.FC = () => {
           dataIndex="id"
           title="ID"
           sorter
-          defaultSortOrder={RefineAntdGetDefaultSortOrder("id", sorter)}
+          defaultSortOrder={RefineAntdGetDefaultSortOrder("id", sorters)}
         />
         <AntdTable.Column dataIndex="title" title="Title" sorter />
         <AntdTable.Column
@@ -589,7 +589,7 @@ export const PostsList: React.FC = () => {
           dataIndex="id"
           title="ID"
           sorter
-          defaultSortOrder={getDefaultSortOrder("id", sorter)}
+          defaultSortOrder={getDefaultSortOrder("id", sorters)}
         />
         <Table.Column dataIndex="title" title="Title" sorter />
         <Table.Column