@refinedev/core 4.54.0 → 4.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.54.0",
+  "version": "4.55.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,74 @@
+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) &
+    React.AnchorHTMLAttributes<HTMLAnchorElement> &
+    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<HTMLAnchorElement>,
+) => {
+  const routerContext = useContext(RouterContext);
+  const LinkFromContext = routerContext?.Link;
+
+  const goFunction = useGo();
+
+  let resolvedTo = "";
+  if ("to" in props) {
+    resolvedTo = props.to;
+  }
+  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 (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<HTMLAnchorElement> },
+) => ReturnType<typeof LinkComponent>;

package/src/contexts/data/types.ts

@@ -96,6 +96,78 @@ export type GraphQLQueryOptions = {
    * ```
    */
   gqlMutation?: DocumentNode;
+
+  /**
+   * @description GraphQL Variables to be used for more advanced query filters by data providers. If filters correspond to table columns,
+   *  these variables will not be presented in the initial filters selected and will not be reset or set by table column filtering.
+   * @optional
+   * @example
+   * ```tsx
+   * import gql from "graphql-tag";
+   * import { useTable } from "@refinedev/antd";
+   * import type { GetFieldsFromList } from "@refinedev/hasura";
+   * import type { GetPostsQuery } from "graphql/types";
+   *
+   *    const POSTS_QUERY = gql`
+   *      query GetPosts(
+   *          $offset: Int!
+   *          $limit: Int!
+   *          $order_by: [posts_order_by!]
+   *          $where: posts_bool_exp
+   *      ) {
+   *          posts(
+   *              offset: $offset
+   *              limit: $limit
+   *              order_by: $order_by
+   *              where: $where
+   *          ) {
+   *              id
+   *              title
+   *              category {
+   *                  id
+   *                  title
+   *              }
+   *          }
+   *          posts_aggregate(where: $where) {
+   *              aggregate {
+   *                  count
+   *              }
+   *          }
+   *      } `;
+   *
+   *
+   *   export const PostList = () => {
+   *     const { tableProps } = useTable<
+   *       GetFieldsFromList<GetPostsQuery>
+   *     >({
+   *       meta: {
+   *         gqlQuery: POSTS_QUERY,
+   *         gqlVariables: {
+   *           where: {
+   *             _and: [
+   *               {
+   *                 title: {
+   *                   _ilike: "%Updated%",
+   *                 },
+   *               },
+   *               {
+   *                 created_at: {
+   *                   _gte: "2023-08-04T08:26:26.489116+00:00"
+   *                 }
+   *               }
+   *             ],
+   *           },
+   *         },
+   *       }
+   *     });
+   *    return ( <Table {...tableProps}/>);
+   *  }
+   *
+   * ```
+   */
+  gqlVariables?: {
+    [key: string]: any;
+  };
 };
 
 export type MetaQuery = {

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/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/use-resource-params/index.ts

@@ -64,7 +64,7 @@ export function useResourceParams(props?: Props): ResourceParams {
 
   const [id, setId] = React.useState<BaseKey | undefined>(defaultId);
 
-  React.useEffect(() => setId(defaultId), [defaultId]);
+  React.useMemo(() => setId(defaultId), [defaultId]);
 
   const formAction = React.useMemo(() => {
     if (!isSameResource && !props?.action) {

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,