@refinedev/core 4.54.1 → 4.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.54.1",
+  "version": "4.56.0",
   "private": false,
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "repository": {

package/src/components/index.ts

@@ -8,3 +8,4 @@ export { RouteChangeHandler } from "./routeChangeHandler";
 export { CanAccess, CanAccessProps } from "./canAccess";
 export { GitHubBanner } from "./gh-banner";
 export { AutoSaveIndicator, AutoSaveIndicatorProps } from "./autoSaveIndicator";
+export { Link, LinkProps } from "./link";

package/src/components/link/index.tsx

@@ -0,0 +1,72 @@
+import React, { type Ref, forwardRef, useContext } from "react";
+import { useGo } from "@hooks/router";
+import { RouterContext } from "@contexts/router";
+import type { GoConfigWithResource } from "../../hooks/router/use-go";
+import warnOnce from "warn-once";
+
+type LinkPropsWithGo = {
+  go: Omit<GoConfigWithResource, "type">;
+};
+
+type LinkPropsWithTo = {
+  to: string;
+};
+
+export type LinkProps<TProps = {}> = React.PropsWithChildren<
+  (LinkPropsWithGo | LinkPropsWithTo) & TProps
+>;
+
+/**
+ * @param to The path to navigate to.
+ * @param go The useGo.go params to navigate to. If `to` provided, this will be ignored.
+ * @returns routerProvider.Link if it is provided, otherwise an anchor tag.
+ */
+const LinkComponent = <TProps = {}>(
+  props: LinkProps<TProps>,
+  ref: Ref<Element>,
+) => {
+  const routerContext = useContext(RouterContext);
+  const LinkFromContext = routerContext?.Link;
+
+  const goFunction = useGo();
+
+  let resolvedTo = "";
+  if ("go" in props) {
+    if (!routerContext?.go) {
+      warnOnce(
+        true,
+        "[Link]: `routerProvider` is not found. To use `go`, Please make sure that you have provided the `routerProvider` for `<Refine />` https://refine.dev/docs/routing/router-provider/ \n",
+      );
+    }
+    resolvedTo = goFunction({ ...props.go, type: "path" }) as string;
+  }
+  if ("to" in props) {
+    resolvedTo = props.to;
+  }
+
+  if (LinkFromContext) {
+    return (
+      <LinkFromContext
+        ref={ref}
+        {...props}
+        to={resolvedTo}
+        // This is a workaround to avoid passing `go` to the Link component.
+        go={undefined}
+      />
+    );
+  }
+  return (
+    <a
+      ref={ref}
+      href={resolvedTo}
+      {...props}
+      // This is a workaround to avoid passing `go` and `to` to the anchor tag.
+      to={undefined}
+      go={undefined}
+    />
+  );
+};
+
+export const Link = forwardRef(LinkComponent) as <T = {}>(
+  props: LinkProps<T> & { ref?: Ref<Element> },
+) => ReturnType<typeof LinkComponent>;

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

@@ -27,6 +27,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
   renderContent,
   formProps,
   title = undefined,
+  mutationVariables,
 }) => {
   const translate = useTranslate();
   const routerType = useRouterType();
@@ -53,7 +54,7 @@ export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          forgotPassword({ email });
+          forgotPassword({ ...mutationVariables, email });
         }}
         {...formProps}
       >

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

@@ -25,6 +25,7 @@ export const LoginPage: React.FC<LoginProps> = ({
   formProps,
   title = undefined,
   hideForm,
+  mutationVariables,
 }) => {
   const routerType = useRouterType();
   const Link = useLink();
@@ -62,6 +63,7 @@ export const LoginPage: React.FC<LoginProps> = ({
           <button
             onClick={() =>
               login({
+                ...mutationVariables,
                 providerName: provider.name,
               })
             }
@@ -91,7 +93,7 @@ export const LoginPage: React.FC<LoginProps> = ({
           <form
             onSubmit={(e) => {
               e.preventDefault();
-              login({ email, password, remember });
+              login({ ...mutationVariables, email, password, remember });
             }}
             {...formProps}
           >

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

@@ -28,6 +28,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
   formProps,
   title = undefined,
   hideForm,
+  mutationVariables,
 }) => {
   const routerType = useRouterType();
   const Link = useLink();
@@ -64,6 +65,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
           <button
             onClick={() =>
               register({
+                ...mutationVariables,
                 providerName: provider.name,
               })
             }
@@ -93,7 +95,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
           <form
             onSubmit={(e) => {
               e.preventDefault();
-              register({ email, password });
+              register({ ...mutationVariables, email, password });
             }}
             {...formProps}
           >

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

@@ -21,6 +21,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
   renderContent,
   formProps,
   title = undefined,
+  mutationVariables,
 }) => {
   const translate = useTranslate();
 
@@ -43,6 +44,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
         onSubmit={(e) => {
           e.preventDefault();
           updatePassword({
+            ...mutationVariables,
             password: newPassword,
             confirmPassword,
           });

package/src/components/pages/auth/types.tsx

@@ -144,6 +144,10 @@ export type AuthPageProps<
    * @optional
    *  */
   title?: React.ReactNode;
+  /**
+   * @description Can be used to pass additional variables to the mutation. This is useful when you need to pass other variables to the authProvider.
+   */
+  mutationVariables?: Record<string, any>;
 };
 
 /**
@@ -167,6 +171,7 @@ export type LoginPageProps<
   formProps?: TFormProps;
   title?: React.ReactNode;
   hideForm?: boolean;
+  mutationVariables?: Record<string, unknown>;
 }>;
 
 /**
@@ -188,6 +193,7 @@ export type RegisterPageProps<
   formProps?: TFormProps;
   title?: React.ReactNode;
   hideForm?: boolean;
+  mutationVariables?: Record<string, unknown>;
 }>;
 
 /**
@@ -207,6 +213,7 @@ export type ForgotPasswordPageProps<
   contentProps?: TContentProps;
   formProps?: TFormProps;
   title?: React.ReactNode;
+  mutationVariables?: Record<string, unknown>;
 }>;
 
 /**
@@ -225,4 +232,5 @@ export type UpdatePasswordPageProps<
   contentProps?: TContentProps;
   formProps?: TFormProps;
   title?: React.ReactNode;
+  mutationVariables?: Record<string, unknown>;
 }>;

package/src/contexts/metaContext/index.tsx

@@ -0,0 +1,45 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+
+type MetaContextValue = Record<string, any>;
+
+export const MetaContext = createContext<MetaContextValue>({});
+
+/**
+ * Is used to provide meta data to the children components.
+ * @internal
+ */
+export const MetaContextProvider = ({
+  children,
+  value,
+}: { children: ReactNode; value: MetaContextValue }) => {
+  const currentValue = useMetaContext();
+
+  const metaContext = useMemo(() => {
+    return {
+      ...currentValue,
+      ...value,
+    };
+  }, [currentValue, value]);
+
+  return (
+    <MetaContext.Provider value={metaContext}>{children}</MetaContext.Provider>
+  );
+};
+
+/**
+ * @internal
+ * @returns The MetaContext value.
+ */
+export const useMetaContext = () => {
+  const context = useContext(MetaContext);
+  if (!context) {
+    throw new Error("useMetaContext must be used within a MetaContextProvider");
+  }
+
+  return useContext(MetaContext);
+};

package/src/contexts/notification/types.ts

@@ -15,7 +15,7 @@ export type SuccessErrorNotification<
         data?: TData,
         values?: TVariables,
         resource?: string,
-      ) => OpenNotificationParams | false);
+      ) => OpenNotificationParams | false | undefined);
   /**
    * Error notification configuration to be displayed when the mutation fails.
    * @default '"There was an error creating resource (status code: `statusCode`)" or "Error when updating resource (status code: statusCode)"'
@@ -27,7 +27,7 @@ export type SuccessErrorNotification<
         error?: TError,
         values?: TVariables,
         resource?: string,
-      ) => OpenNotificationParams | false);
+      ) => OpenNotificationParams | false | undefined);
 };
 
 export type OpenNotificationParams = {

package/src/hooks/auth/index.ts

@@ -8,3 +8,4 @@ export { useUpdatePassword } from "./useUpdatePassword";
 export { useAuthenticated, useIsAuthenticated } from "./useIsAuthenticated";
 export { useCheckError, useOnError } from "./useOnError";
 export { useIsExistAuthentication } from "./useIsExistAuthentication";
+export { useInvalidateAuthStore } from "./useInvalidateAuthStore";

package/src/hooks/menu/useMenu.tsx

@@ -23,12 +23,14 @@ export type UseMenuProps = {
   hideOnMissingParameter?: boolean;
 };
 
-export type TreeMenuItem = FlatTreeItem & {
-  route?: string;
-  icon?: React.ReactNode;
-  label?: string;
-  children: TreeMenuItem[];
-};
+export type TreeMenuItem =
+  // Omitted because `label` and `route` are deprecated in `resource` but not in `menuItems`. These are populated in `prepareItem` for ease of use.
+  Omit<FlatTreeItem, "label" | "route" | "children"> & {
+    route?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    children: TreeMenuItem[];
+  };
 
 const getCleanPath = (pathname: string) => {
   return pathname
@@ -86,7 +88,9 @@ export const useMenu = (
 
   const prepareItem = React.useCallback(
     (item: FlatTreeItem): TreeMenuItem | undefined => {
-      if (item?.meta?.hide ?? item?.options?.hide) return undefined;
+      if (pickNotDeprecated(item?.meta?.hide, item?.options?.hide)) {
+        return undefined;
+      }
       if (!item?.list && item.children.length === 0) return undefined;
 
       const composed = item.list

package/src/hooks/navigation/index.ts

@@ -13,7 +13,7 @@ import type { IResourceItem } from "../../contexts/resource/types";
 export type HistoryType = "push" | "replace";
 
 /**
- * `refine` uses {@link https://reactrouter.com/en/hooks/use-navigate `React Router`} and comes with all redirects out of the box.
+ * `refine` uses {@link https://reactrouter.com/en/main/hooks/use-navigate#usenavigate `React Router`} and comes with all redirects out of the box.
  * It allows you to manage your routing operations in refine.
  * Using this hook, you can manage all the routing operations of your application very easily.
  *

package/src/hooks/router/use-link/index.tsx

@@ -1,17 +1,5 @@
-import { RouterContext } from "@contexts/router";
-import React, { useContext } from "react";
+import { Link } from "../../../components/link";
 
 export const useLink = () => {
-  const routerContext = useContext(RouterContext);
-
-  if (routerContext?.Link) {
-    return routerContext.Link;
-  }
-
-  const FallbackLink: Required<typeof routerContext>["Link"] = ({
-    to,
-    ...rest
-  }) => <a href={to} {...rest} />;
-
-  return FallbackLink;
+  return Link;
 };

package/src/hooks/useMeta/index.ts

@@ -1,3 +1,4 @@
+import { useMetaContext } from "@contexts/metaContext";
 import { sanitizeResource } from "@definitions/helpers/sanitize-resource";
 import { useParsed } from "@hooks/router";
 
@@ -6,12 +7,14 @@ import type { IResourceItem } from "../../contexts/resource/types";
 
 /**
  * Hook that returns a function to get meta.
- * The meta is a combination of the resource meta, hook meta and query params.
+ * The meta is a combination of the resource meta, hook meta, query params and metaContext value.
  * @internal
  */
 export const useMeta = () => {
   const { params } = useParsed();
 
+  const metaContext = useMetaContext();
+
   const getMetaFn = ({
     resource,
     meta: metaFromProp,
@@ -30,7 +33,18 @@ export const useMeta = () => {
       ...additionalParams
     } = params ?? {};
 
-    return { ...meta, ...additionalParams, ...metaFromProp };
+    const result: Record<string, unknown> = {
+      ...meta,
+      ...additionalParams,
+      ...metaFromProp,
+    };
+
+    // when MultiTenancyProvider from "@refinedev-ee/multi-tenancy" is provided, we need to add tenantId to the meta
+    if (metaContext?.tenantId) {
+      result["tenantId"] = metaContext.tenantId;
+    }
+
+    return result;
   };
 
   return getMetaFn;

package/src/hooks/useTable/index.ts

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import type {
   QueryObserverResult,
@@ -520,40 +520,56 @@ export function useTable<
     dataProviderName,
   });
 
-  const setFiltersAsMerge = (newFilters: CrudFilter[]) => {
-    setFilters((prevFilters) =>
-      unionFilters(preferredPermanentFilters, newFilters, prevFilters),
-    );
-  };
+  const setFiltersAsMerge = useCallback(
+    (newFilters: CrudFilter[]) => {
+      setFilters((prevFilters) =>
+        unionFilters(preferredPermanentFilters, newFilters, prevFilters),
+      );
+    },
+    [preferredPermanentFilters],
+  );
 
-  const setFiltersAsReplace = (newFilters: CrudFilter[]) => {
-    setFilters(unionFilters(preferredPermanentFilters, newFilters));
-  };
+  const setFiltersAsReplace = useCallback(
+    (newFilters: CrudFilter[]) => {
+      setFilters(unionFilters(preferredPermanentFilters, newFilters));
+    },
+    [preferredPermanentFilters],
+  );
 
-  const setFiltersWithSetter = (
-    setter: (prevFilters: CrudFilter[]) => CrudFilter[],
-  ) => {
-    setFilters((prev) => unionFilters(preferredPermanentFilters, setter(prev)));
-  };
+  const setFiltersWithSetter = useCallback(
+    (setter: (prevFilters: CrudFilter[]) => CrudFilter[]) => {
+      setFilters((prev) =>
+        unionFilters(preferredPermanentFilters, setter(prev)),
+      );
+    },
+    [preferredPermanentFilters],
+  );
 
-  const setFiltersFn: useTableReturnType<TQueryFnData>["setFilters"] = (
-    setterOrFilters,
-    behavior: SetFilterBehavior = prefferedFilterBehavior,
-  ) => {
-    if (typeof setterOrFilters === "function") {
-      setFiltersWithSetter(setterOrFilters);
-    } else {
-      if (behavior === "replace") {
-        setFiltersAsReplace(setterOrFilters);
-      } else {
-        setFiltersAsMerge(setterOrFilters);
-      }
-    }
-  };
+  const setFiltersFn: useTableReturnType<TQueryFnData>["setFilters"] =
+    useCallback(
+      (
+        setterOrFilters,
+        behavior: SetFilterBehavior = prefferedFilterBehavior,
+      ) => {
+        if (typeof setterOrFilters === "function") {
+          setFiltersWithSetter(setterOrFilters);
+        } else {
+          if (behavior === "replace") {
+            setFiltersAsReplace(setterOrFilters);
+          } else {
+            setFiltersAsMerge(setterOrFilters);
+          }
+        }
+      },
+      [setFiltersWithSetter, setFiltersAsReplace, setFiltersAsMerge],
+    );
 
-  const setSortWithUnion = (newSorter: CrudSort[]) => {
-    setSorters(() => unionSorters(preferredPermanentSorters, newSorter));
-  };
+  const setSortWithUnion = useCallback(
+    (newSorter: CrudSort[]) => {
+      setSorters(() => unionSorters(preferredPermanentSorters, newSorter));
+    },
+    [preferredPermanentSorters],
+  );
 
   const { elapsedTime } = useLoadingOvertime({
     isLoading: queryResult.isFetching,

package/src/index.tsx

@@ -224,3 +224,8 @@ export {
 } from "./contexts/undoableQueue/types.js";
 
 export { IUnsavedWarnContext } from "./contexts/unsavedWarn/types.js";
+
+export {
+  MetaContextProvider,
+  useMetaContext,
+} from "./contexts/metaContext/index.js";