@refinedev/core 4.58.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.58.0",
+  "version": "5.0.1",
   "private": false,
   "description": "Refine is a React meta-framework for building enterprise-level, data-intensive applications rapidly with support for modern UI libraries and headless integrations.",
   "repository": {
@@ -27,8 +27,8 @@
   "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@refinedev/devtools-internal": "1.1.16",
-    "@tanstack/react-query": "^4.10.1",
+    "@refinedev/devtools-internal": "2.0.0",
+    "@tanstack/react-query": "^5.81.5",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "papaparse": "^5.3.0",
@@ -39,34 +39,37 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-resolve": "^0.1.4",
-    "@testing-library/dom": "^8.5.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/user-event": "^14.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.171",
+    "@types/node": "^20",
     "@types/papaparse": "^5.2.5",
     "@types/pluralize": "^0.0.29",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "@types/react-router-dom": "^5.1.8",
-    "@types/testing-library__jest-dom": "^5.14.3",
     "graphql": "^15.6.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
     "ts-jest": "^29.1.2",
     "tsup": "^6.7.0",
-    "typescript": "^5.4.2"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.10.1",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@tanstack/react-query": "^5.81.5",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"

package/src/components/authenticated/index.tsx

@@ -1,19 +1,11 @@
 import React from "react";
-
 import { useActiveAuthProvider } from "@definitions/index";
-import {
-  useGo,
-  useIsAuthenticated,
-  useNavigation,
-  useParsed,
-  useRouterContext,
-  useRouterType,
-} from "@hooks";
+import { useGo, useIsAuthenticated, useParsed } from "@hooks";
 import type { GoConfig } from "../../contexts/router/types";
 
 export type AuthCheckParams = any;
 
-export type AuthenticatedCommonProps = {
+export type AuthenticatedProps = {
   /**
    * Unique key to identify the component.
    * This is required if you have multiple `Authenticated` components at the same level.
@@ -23,8 +15,6 @@ export type AuthenticatedCommonProps = {
   /**
    * Whether to redirect user if not logged in or not.
    * If not set, user will be redirected to `redirectTo` property of the `check` function's response.
-   * This behavior is only available for new auth providers.
-   * Legacy auth providers will redirect to `/login` by default if this property is not set.
    * If set to a string, user will be redirected to that string.
    *
    * This property only works if `fallback` is **not set**.
@@ -55,14 +45,6 @@ export type AuthenticatedCommonProps = {
   params?: AuthCheckParams;
 };
 
-export type LegacyAuthenticatedProps = {
-  v3LegacyAuthProviderCompatible: true;
-} & AuthenticatedCommonProps;
-
-export type AuthenticatedProps = {
-  v3LegacyAuthProviderCompatible?: false;
-} & AuthenticatedCommonProps;
-
 /**
  * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
  *
@@ -77,26 +59,6 @@ export type AuthenticatedProps = {
  *
  * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
  */
-export function Authenticated(
-  props: LegacyAuthenticatedProps,
-): JSX.Element | null;
-
-/**
- * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
- *
- * @requires {@link https://react.dev/learn/rendering-lists#why-does-react-need-keys `key`} prop if you have multiple components at the same level.
- * In React, components don't automatically unmount and remount with prop changes, which is generally good for performance. However, for specific cases this can cause issues like unwanted content rendering (`fallback` or `children`). To solve this, assigning unique `key` values to each instance of component is necessary, forcing React to unmount and remount the component, rather than just updating its props.
- * @example
- *```tsx
- * <Authenticated key="dashboard">
- *   <h1>Dashboard Page</h1>
- * </Authenticated>
- *```
- *
- * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
- */
-export function Authenticated(props: AuthenticatedProps): JSX.Element | null;
-
 export function Authenticated({
   redirectOnFail = true,
   appendCurrentPathToQuery = true,
@@ -104,38 +66,23 @@ export function Authenticated({
   fallback: fallbackContent,
   loading: loadingContent,
   params,
-}: AuthenticatedProps | LegacyAuthenticatedProps): JSX.Element | null {
+}: AuthenticatedProps): React.JSX.Element | null {
   const activeAuthProvider = useActiveAuthProvider();
-  const routerType = useRouterType();
-
   const hasAuthProvider = Boolean(activeAuthProvider?.isProvided);
-  const isLegacyAuth = Boolean(activeAuthProvider?.isLegacy);
-  const isLegacyRouter = routerType === "legacy";
-
   const parsed = useParsed();
   const go = useGo();
-  const { useLocation } = useRouterContext();
-  const legacyLocation = useLocation();
 
   const {
     isFetching,
-    isSuccess,
     data: {
       authenticated: isAuthenticatedStatus,
       redirectTo: authenticatedRedirect,
     } = {},
   } = useIsAuthenticated({
-    v3LegacyAuthProviderCompatible: isLegacyAuth,
     params,
   });
 
-  // Authentication status
-  const isAuthenticated = hasAuthProvider
-    ? isLegacyAuth
-      ? isSuccess
-      : isAuthenticatedStatus
-    : true;
-
+  const isAuthenticated = hasAuthProvider ? isAuthenticatedStatus : true;
   // when there is no auth provider
   if (!hasAuthProvider) {
     return <>{children ?? null}</>;
@@ -160,30 +107,17 @@ export function Authenticated({
 
   // Redirect url to use. use redirectOnFail if it is set.
   // Otherwise use redirectTo property of the check function's response.
-  // If both are not set, use `/login` as the default redirect url. (only for legacy auth providers)
-  const appliedRedirect = isLegacyAuth
-    ? typeof redirectOnFail === "string"
-      ? redirectOnFail
-      : "/login"
-    : typeof redirectOnFail === "string"
+  const appliedRedirect =
+    typeof redirectOnFail === "string"
       ? redirectOnFail
       : (authenticatedRedirect as string | undefined);
 
   // Current pathname to append to the redirect url.
   // User will be redirected to this url after successful mutation. (like login)
-  const pathname = `${
-    isLegacyRouter ? legacyLocation?.pathname : parsed.pathname
-  }`.replace(/(\?.*|#.*)$/, "");
+  const pathname = `${parsed.pathname}`.replace(/(\?.*|#.*)$/, "");
+
   // Redirect if appliedRedirect is set, otherwise return null.
-  //  Uses `replace` for legacy router and `go` for new router.
   if (appliedRedirect) {
-    if (isLegacyRouter) {
-      const toQuery = appendCurrentPathToQuery
-        ? `?to=${encodeURIComponent(pathname)}`
-        : "";
-      return <RedirectLegacy to={`${appliedRedirect}${toQuery}`} />;
-    }
-
     const queryToValue: string | undefined = parsed.params?.to
       ? parsed.params.to
       : go({
@@ -220,13 +154,3 @@ const Redirect = ({ config }: { config: GoConfig }) => {
 
   return null;
 };
-
-const RedirectLegacy = ({ to }: { to: string }) => {
-  const { replace } = useNavigation();
-
-  React.useEffect(() => {
-    replace(to);
-  }, [replace, to]);
-
-  return null;
-};

package/src/components/autoSaveIndicator/index.tsx

@@ -14,15 +14,16 @@ export type AutoSaveIndicatorProps<
   /**
    * The data returned by the update request.
    */
-  data?: UseUpdateReturnType<TData, TError, TVariables>["data"];
+  data?: UseUpdateReturnType<TData, TError, TVariables>["mutation"]["data"];
   /**
    * The error returned by the update request.
    */
-  error?: UseUpdateReturnType<TData, TError, TVariables>["error"];
+  error?: UseUpdateReturnType<TData, TError, TVariables>["mutation"]["error"];
   /**
    * The status of the update request.
    */
-  status: UseUpdateReturnType<TData, TError, TVariables>["status"];
+  status: UseUpdateReturnType<TData, TError, TVariables>["mutation"]["status"];
+
   /**
    * The elements to display for each status.
    */
@@ -57,8 +58,10 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
       return <>{success}</>;
     case "error":
       return <>{error}</>;
-    case "loading":
+    case "pending":
       return <>{loading}</>;
+    case "idle":
+      return <>{idle}</>;
     default:
       return <>{idle}</>;
   }

package/src/components/canAccess/index.tsx

@@ -5,10 +5,15 @@ import { useCan, useResourceParams } from "@hooks";
 
 import type { CanReturnType } from "../../contexts/accessControl/types";
 import type { BaseKey } from "../../contexts/data/types";
-import type { IResourceItem, ITreeMenu } from "../../contexts/resource/types";
+import type { IResourceItem } from "../../contexts/resource/types";
+
+type ITreeResource = IResourceItem & {
+  key?: string;
+  children: ITreeResource[];
+};
 
 type CanParams = {
-  resource?: IResourceItem & { children?: ITreeMenu[] };
+  resource?: IResourceItem & { children?: ITreeResource[] };
   id?: BaseKey;
   [key: string]: any;
 };
@@ -43,7 +48,13 @@ type CanAccessBaseProps = {
    */
   onUnauthorized?: (props: OnUnauthorizedProps) => void;
   children: React.ReactNode;
-  queryOptions?: UseQueryOptions<CanReturnType>;
+  queryOptions?: Omit<
+    UseQueryOptions<CanReturnType>,
+    "queryKey" | "queryFn"
+  > & {
+    queryKey?: UseQueryOptions<CanReturnType>["queryKey"];
+    queryFn?: UseQueryOptions<CanReturnType>["queryFn"];
+  };
 };
 
 type CanAccessWithoutParamsProps = {

package/src/components/containers/refine/index.tsx

@@ -1,19 +1,20 @@
 import React from "react";
 
 import { useQuerySubscription } from "@refinedev/devtools-internal";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 
-import { ReadyPage as DefaultReadyPage, RouteChangeHandler } from "@components";
+import { RouteChangeHandler } from "@components";
 import { Telemetry } from "@components/telemetry";
 import { handleRefineOptions } from "@definitions";
 import { useDeepMemo } from "@hooks/deepMemo";
 
 import { AccessControlContextProvider } from "../../../contexts/accessControl";
 import { AuditLogContextProvider } from "../../../contexts/auditLog";
-import {
-  AuthBindingsContextProvider,
-  LegacyAuthContextProvider,
-} from "../../../contexts/auth";
+import { AuthProviderContextProvider } from "../../../contexts/auth";
 import { DataContextProvider } from "../../../contexts/data";
 import { I18nContextProvider } from "../../../contexts/i18n";
 import { LiveContextProvider } from "../../../contexts/live";
@@ -21,8 +22,6 @@ import { NotificationContextProvider } from "../../../contexts/notification";
 import { RefineContextProvider } from "../../../contexts/refine";
 import { ResourceContextProvider } from "../../../contexts/resource";
 import { RouterContextProvider } from "../../../contexts/router";
-import { LegacyRouterContextProvider } from "../../../contexts/router/legacy";
-import { RouterPickerProvider } from "../../../contexts/router/picker";
 import { UndoableQueueContextProvider } from "../../../contexts/undoableQueue";
 import { UnsavedWarnContextProvider } from "../../../contexts/unsavedWarn";
 
@@ -37,28 +36,16 @@ import { useRouterMisuseWarning } from "../../../hooks/router/use-router-misuse-
  * @see {@link https://refine.dev/docs/api-reference/core/components/refine-config} for more details.
  */
 export const Refine: React.FC<RefineProps> = ({
-  legacyAuthProvider,
   authProvider,
   dataProvider,
-  legacyRouterProvider,
   routerProvider,
   notificationProvider,
   accessControlProvider,
   auditLogProvider,
   resources,
-  DashboardPage,
-  ReadyPage,
-  LoginPage,
-  catchAll,
   children,
   liveProvider,
   i18nProvider,
-  Title,
-  Layout,
-  Sider,
-  Header,
-  Footer,
-  OffLayoutArea,
   onLiveEvent,
   options,
 }) => {
@@ -81,7 +68,7 @@ export const Refine: React.FC<RefineProps> = ({
         ...reactQueryWithDefaults.clientConfig.defaultOptions,
         queries: {
           refetchOnWindowFocus: false,
-          keepPreviousData: true,
+          placeholderData: keepPreviousData,
           ...reactQueryWithDefaults.clientConfig.defaultOptions?.queries,
         },
       },
@@ -104,113 +91,55 @@ export const Refine: React.FC<RefineProps> = ({
   useRouterMisuseWarning(routerProvider);
   /** */
 
-  /**
-   * `<ReadyPage />` is only used in the legacy routing and is not used in the new routing.
-   * If `legacyRouterProvider` is provided and `routerProvider` is not, we'll check for the `resources` prop to be empty.
-   * If `resources` is empty, then we'll render `<ReadyPage />` component.
-   */
-  if (
-    legacyRouterProvider &&
-    !routerProvider &&
-    (resources ?? []).length === 0
-  ) {
-    return ReadyPage ? <ReadyPage /> : <DefaultReadyPage />;
-  }
-
-  /** Router
-   *
-   * Handle routing from `RouterContextProvider` and `router` prop for the brand new way
-   * If `router` is not provided, then we'r checking for `routerProvider` prop
-   * If `routerProvider` is provided, then `RouterContextProvider` is used
-   * If none of them is provided, then `RouterContextProvider` is used because it supports undefined router
-   *
-   * `RouterContextProvider` is skipped whenever possible and by this way,
-   * we can achieve backward compability only when its provided by user
-   *
-   */
-  const { RouterComponent = React.Fragment } = !routerProvider
-    ? legacyRouterProvider ?? {}
-    : {};
-  /** */
-
   return (
     <QueryClientProvider client={queryClient}>
       <NotificationContextProvider {...notificationProviderContextValues}>
-        <LegacyAuthContextProvider
-          {...(legacyAuthProvider ?? {})}
-          isProvided={Boolean(legacyAuthProvider)}
+        <AuthProviderContextProvider
+          {...(authProvider ?? {})}
+          isProvided={Boolean(authProvider)}
         >
-          <AuthBindingsContextProvider
-            {...(authProvider ?? {})}
-            isProvided={Boolean(authProvider)}
-          >
-            <DataContextProvider dataProvider={dataProvider}>
-              <LiveContextProvider liveProvider={liveProvider}>
-                <RouterPickerProvider
-                  value={
-                    legacyRouterProvider && !routerProvider ? "legacy" : "new"
-                  }
-                >
-                  <RouterContextProvider router={routerProvider}>
-                    <LegacyRouterContextProvider {...legacyRouterProvider}>
-                      <ResourceContextProvider resources={resources ?? []}>
-                        <I18nContextProvider i18nProvider={i18nProvider}>
-                          <AccessControlContextProvider
-                            {...(accessControlProvider ?? {})}
+          <DataContextProvider dataProvider={dataProvider}>
+            <LiveContextProvider liveProvider={liveProvider}>
+              <RouterContextProvider router={routerProvider}>
+                <ResourceContextProvider resources={resources ?? []}>
+                  <I18nContextProvider i18nProvider={i18nProvider}>
+                    <AccessControlContextProvider
+                      {...(accessControlProvider ?? {})}
+                    >
+                      <AuditLogContextProvider {...(auditLogProvider ?? {})}>
+                        <UndoableQueueContextProvider>
+                          <RefineContextProvider
+                            mutationMode={optionsWithDefaults.mutationMode}
+                            warnWhenUnsavedChanges={
+                              optionsWithDefaults.warnWhenUnsavedChanges
+                            }
+                            syncWithLocation={
+                              optionsWithDefaults.syncWithLocation
+                            }
+                            undoableTimeout={
+                              optionsWithDefaults.undoableTimeout
+                            }
+                            liveMode={optionsWithDefaults.liveMode}
+                            onLiveEvent={onLiveEvent}
+                            options={optionsWithDefaults}
                           >
-                            <AuditLogContextProvider
-                              {...(auditLogProvider ?? {})}
-                            >
-                              <UndoableQueueContextProvider>
-                                <RefineContextProvider
-                                  mutationMode={
-                                    optionsWithDefaults.mutationMode
-                                  }
-                                  warnWhenUnsavedChanges={
-                                    optionsWithDefaults.warnWhenUnsavedChanges
-                                  }
-                                  syncWithLocation={
-                                    optionsWithDefaults.syncWithLocation
-                                  }
-                                  Title={Title}
-                                  undoableTimeout={
-                                    optionsWithDefaults.undoableTimeout
-                                  }
-                                  catchAll={catchAll}
-                                  DashboardPage={DashboardPage}
-                                  LoginPage={LoginPage}
-                                  Layout={Layout}
-                                  Sider={Sider}
-                                  Footer={Footer}
-                                  Header={Header}
-                                  OffLayoutArea={OffLayoutArea}
-                                  hasDashboard={!!DashboardPage}
-                                  liveMode={optionsWithDefaults.liveMode}
-                                  onLiveEvent={onLiveEvent}
-                                  options={optionsWithDefaults}
-                                >
-                                  <UnsavedWarnContextProvider>
-                                    <RouterComponent>
-                                      {children}
-                                      {!disableTelemetryWithDefault && (
-                                        <Telemetry />
-                                      )}
-                                      <RouteChangeHandler />
-                                    </RouterComponent>
-                                  </UnsavedWarnContextProvider>
-                                </RefineContextProvider>
-                              </UndoableQueueContextProvider>
-                            </AuditLogContextProvider>
-                          </AccessControlContextProvider>
-                        </I18nContextProvider>
-                      </ResourceContextProvider>
-                    </LegacyRouterContextProvider>
-                  </RouterContextProvider>
-                </RouterPickerProvider>
-              </LiveContextProvider>
-            </DataContextProvider>
-          </AuthBindingsContextProvider>
-        </LegacyAuthContextProvider>
+                            <UnsavedWarnContextProvider>
+                              <React.Fragment>
+                                {children}
+                                {!disableTelemetryWithDefault && <Telemetry />}
+                                <RouteChangeHandler />
+                              </React.Fragment>
+                            </UnsavedWarnContextProvider>
+                          </RefineContextProvider>
+                        </UndoableQueueContextProvider>
+                      </AuditLogContextProvider>
+                    </AccessControlContextProvider>
+                  </I18nContextProvider>
+                </ResourceContextProvider>
+              </RouterContextProvider>
+            </LiveContextProvider>
+          </DataContextProvider>
+        </AuthProviderContextProvider>
       </NotificationContextProvider>
     </QueryClientProvider>
   );

package/src/components/index.ts

@@ -2,7 +2,6 @@ export * from "./pages";
 export * from "./containers";
 export * from "./undoableQueue";
 
-export { LayoutWrapper } from "./layoutWrapper";
 export { Authenticated } from "./authenticated";
 export { RouteChangeHandler } from "./routeChangeHandler";
 export { CanAccess, CanAccessProps } from "./canAccess";

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -1,12 +1,6 @@
 import React, { useState } from "react";
 
-import {
-  useForgotPassword,
-  useLink,
-  useRouterContext,
-  useRouterType,
-  useTranslate,
-} from "@hooks";
+import { useForgotPassword, useLink, useTranslate } from "@hooks";
 
 import type { DivPropsType, FormPropsType } from "../..";
 import type {
@@ -30,19 +24,15 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
   mutationVariables,
 }) => {
   const translate = useTranslate();
-  const routerType = useRouterType();
   const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
   const [email, setEmail] = useState("");
 
-  const { mutate: forgotPassword, isLoading } =
+  const { mutate: forgotPassword, isPending } =
     useForgotPassword<ForgotPasswordFormTypes>();
 
   const renderLink = (link: string, text?: string) => {
-    return <ActiveLink to={link}>{text}</ActiveLink>;
+    return <Link to={link}>{text}</Link>;
   };
 
   const content = (
@@ -81,7 +71,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
           />
           <input
             type="submit"
-            disabled={isLoading}
+            disabled={isPending}
             value={translate(
               "pages.forgotPassword.buttons.submit",
               "Send reset instructions",

package/src/components/pages/auth/components/login/index.tsx

@@ -1,13 +1,6 @@
 import React, { useState } from "react";
 
-import { useActiveAuthProvider } from "@definitions/helpers";
-import {
-  useLink,
-  useLogin,
-  useRouterContext,
-  useRouterType,
-  useTranslate,
-} from "@hooks";
+import { useLink, useLogin, useTranslate } from "@hooks";
 
 import type { DivPropsType, FormPropsType } from "../..";
 import type { LoginFormTypes, LoginPageProps } from "../../types";
@@ -27,11 +20,7 @@ export const LoginPage: React.FC<LoginProps> = ({
   hideForm,
   mutationVariables,
 }) => {
-  const routerType = useRouterType();
   const Link = useLink();
-  const { Link: LegacyLink } = useRouterContext();
-
-  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -39,13 +28,10 @@ export const LoginPage: React.FC<LoginProps> = ({
 
   const translate = useTranslate();
 
-  const authProvider = useActiveAuthProvider();
-  const { mutate: login } = useLogin<LoginFormTypes>({
-    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-  });
+  const { mutate: login } = useLogin<LoginFormTypes>();
 
   const renderLink = (link: string, text?: string) => {
-    return <ActiveLink to={link}>{text}</ActiveLink>;
+    return <Link to={link}>{text}</Link>;
   };
 
   const renderProviders = () => {