@refinedev/core 4.48.0 → 4.49.1

package/src/hooks/notification/useCancelNotification/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 
 import { UndoableQueueContext } from "@contexts/undoableQueue";
-import { IUndoableQueue, IUndoableQueueContext } from "../../../interfaces";
+import { IUndoableQueue } from "../../../contexts/undoableQueue/types";
 
 export type UseCancelNotificationType = () => {
   notifications: IUndoableQueue[];
@@ -10,7 +10,7 @@ export type UseCancelNotificationType = () => {
 
 export const useCancelNotification: UseCancelNotificationType = () => {
   const { notifications, notificationDispatch } =
-    useContext<IUndoableQueueContext>(UndoableQueueContext);
+    useContext(UndoableQueueContext);
 
   return { notifications, notificationDispatch };
 };

package/src/hooks/notification/useHandleNotification/index.ts

@@ -1,8 +1,9 @@
 import { useCallback } from "react";
 
-import { OpenNotificationParams } from "../../../interfaces";
 import { useNotification } from "@hooks";
 
+import { OpenNotificationParams } from "../../../contexts/notification/types";
+
 export const useHandleNotification = (): typeof handleNotification => {
   const { open } = useNotification();
 

package/src/hooks/notification/useNotification/index.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 
 import { NotificationContext } from "@contexts/notification";
-import { INotificationContext } from "../../../interfaces";
+import { INotificationContext } from "../../../contexts/notification/types";
 
 export const useNotification = (): INotificationContext => {
   const { open, close } = useContext(NotificationContext);

package/src/hooks/redirection/index.ts

@@ -1,13 +1,11 @@
 import { useCallback } from "react";
 
-import {
-  BaseKey,
-  IResourceItem,
-  MetaDataQuery,
-  RedirectAction,
-} from "../../interfaces";
 import { useNavigation } from "@hooks";
 
+import { BaseKey, MetaDataQuery } from "../../contexts/data/types";
+import { IResourceItem } from "../../contexts/resource/types";
+import { RedirectAction } from "../form/types";
+
 export type UseRedirectionAfterSubmissionType = () => (options: {
   redirect: RedirectAction;
   resource?: IResourceItem;

package/src/hooks/refine/useMutationMode.ts

@@ -1,9 +1,13 @@
 import { useContext } from "react";
 
 import { RefineContext } from "@contexts/refine";
-import { IRefineContextOptions } from "../../interfaces";
+import { IRefineContextOptions } from "../../contexts/refine/types";
+import type { MutationMode } from "../../contexts/data/types";
 
-type UseMutationModeType = () => {
+type UseMutationModeType = (
+  preferredMutationMode?: MutationMode,
+  preferredUndoableTimeout?: number,
+) => {
   mutationMode: IRefineContextOptions["mutationMode"];
   undoableTimeout: IRefineContextOptions["undoableTimeout"];
 };
@@ -15,8 +19,14 @@ type UseMutationModeType = () => {
  *
  * @see {@link https://refine.dev/docs/guides-and-concepts/mutation-mode} for more details.
  */
-export const useMutationMode: UseMutationModeType = () => {
+export const useMutationMode: UseMutationModeType = (
+  preferredMutationMode?: MutationMode,
+  preferredUndoableTimeout?: number,
+) => {
   const { mutationMode, undoableTimeout } = useContext(RefineContext);
 
-  return { mutationMode, undoableTimeout };
+  return {
+    mutationMode: preferredMutationMode ?? mutationMode,
+    undoableTimeout: preferredUndoableTimeout ?? undoableTimeout,
+  };
 };

package/src/hooks/refine/useSyncWithLocation.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 
 import { RefineContext } from "@contexts/refine";
-import { IRefineContextOptions } from "../../interfaces";
+import { IRefineContextOptions } from "../../contexts/refine/types";
 
 type UseSyncWithLocationType = () => {
   syncWithLocation: IRefineContextOptions["syncWithLocation"];

package/src/hooks/refine/useTitle.tsx

@@ -1,6 +1,8 @@
 import { useContext } from "react";
+
 import { RefineContext } from "@contexts/refine";
-import { TitleProps } from "../../interfaces";
+
+import { TitleProps } from "../../contexts/refine/types";
 
 /**
  * `useTitle` returns a component that calls the `<Title>` passed to the `<Refine>`.

package/src/hooks/refine/useWarnAboutChange/index.ts

@@ -2,10 +2,8 @@ import { useContext } from "react";
 
 import { RefineContext } from "@contexts/refine";
 import { UnsavedWarnContext } from "@contexts/unsavedWarn";
-import {
-  IRefineContextOptions,
-  IUnsavedWarnContext,
-} from "../../../interfaces";
+import { IRefineContextOptions } from "../../../contexts/refine/types";
+import { IUnsavedWarnContext } from "../../../contexts/unsavedWarn/types";
 
 type UseWarnAboutChangeType = () => {
   warnWhenUnsavedChanges: IRefineContextOptions["warnWhenUnsavedChanges"];

package/src/hooks/resource/useResource/index.ts

@@ -1,16 +1,15 @@
 import { useContext } from "react";
 
 import { ResourceContext } from "@contexts/resource";
-import {
-  Action,
-  BaseKey,
-  IResourceItem,
-  ResourceRouterParams,
-} from "../../../interfaces";
-import { useRouterContext, useResourceWithRoute } from "@hooks";
-import { useRouterType } from "../../../contexts/router-picker";
-import { useParsed } from "../../router/use-parsed";
+import { useResourceWithRoute, useRouterContext } from "@hooks";
+
+import { BaseKey } from "../../../contexts/data/types";
+import { IResourceItem } from "../../../contexts/resource/types";
+import { ResourceRouterParams } from "../../../contexts/router/legacy/types";
+import { useRouterType } from "../../../contexts/router/picker";
+import { Action } from "../../../contexts/router/types";
 import { pickResource } from "../../../definitions/helpers/pick-resource";
+import { useParsed } from "../../router/use-parsed";
 
 export type UseResourceLegacyProps = {
   /**
@@ -48,7 +47,13 @@ export type UseResourceReturnType = {
    * @deprecated Use `resource.name` instead when you need to get the resource name.
    */
   resourceName?: string;
+  /**
+   * @deprecated This value may not always reflect the correct "id" value. Use `useResourceParams` to obtain the calculated "id"` or `useParsed` to obtain the id from the route instead.
+   */
   id?: BaseKey;
+  /**
+   * @deprecated This value may not always reflect the correct "action" value. Use `useResourceParams` to obtain the calculated "action" or `useParsed` to obtain the action from the route instead.
+   */
   action?: Action;
   select: <T extends boolean = true>(
     resourceName: string,

package/src/hooks/resource/useResourceWithRoute/index.ts

@@ -1,8 +1,10 @@
-import { useContext, useCallback } from "react";
+import { useCallback, useContext } from "react";
+
 import { ResourceContext } from "@contexts/resource";
-import { IResourceItem } from "../../../interfaces";
 import { pickResource } from "@definitions/helpers/pick-resource";
 
+import { IResourceItem } from "../../../contexts/resource/types";
+
 export type UseResourceWithRouteReturnType = (route: string) => IResourceItem;
 
 /**

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

@@ -1,12 +1,12 @@
-import { RouterBindingsContext } from "@contexts/router";
+import { RouterContext } from "@contexts/router";
 import React, { useContext } from "react";
 
 export const useBack = () => {
-  const bindings = useContext(RouterBindingsContext);
+  const routerContext = useContext(RouterContext);
 
   const useBack = React.useMemo(
-    () => bindings?.back ?? (() => () => undefined),
-    [bindings?.back],
+    () => routerContext?.back ?? (() => () => undefined),
+    [routerContext?.back],
   );
 
   const back = useBack();

package/src/hooks/router/use-get-to-path/index.ts

@@ -1,10 +1,12 @@
 import React from "react";
-import { useResource } from "../../resource";
-import { Action, IResourceItem } from "../../../interfaces";
+
+import { IResourceItem } from "../../../contexts/resource/types";
+import { useRouterType } from "../../../contexts/router/picker";
+import { Action } from "../../../contexts/router/types";
 import { getActionRoutesFromResource } from "../../../definitions/helpers/router";
-import { useParsed } from "../use-parsed";
 import { composeRoute } from "../../../definitions/helpers/router/compose-route";
-import { useRouterType } from "./../../../contexts/router-picker";
+import { useResource } from "../../resource";
+import { useParsed } from "../use-parsed";
 
 type UseToPathParams = {
   resource?: IResourceItem;

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

@@ -1,12 +1,14 @@
-import { RouterBindingsContext } from "@contexts/router";
-import { useResource } from "@hooks/resource";
 import React, { useCallback, useContext } from "react";
-import type {
+
+import { RouterContext } from "@contexts/router";
+import { useResource } from "@hooks/resource";
+
+import { BaseKey } from "../../../contexts/data/types";
+import { IResourceItem } from "../../../contexts/resource/types";
+import {
   Action,
-  BaseKey,
   GoConfig as GoConfigBase,
-  IResourceItem,
-} from "../../../interfaces";
+} from "../../../contexts/router/types";
 import { useGetToPath } from "../use-get-to-path";
 
 type ResourceWithoutId = {
@@ -36,13 +38,13 @@ export type GoConfigWithResource = Omit<GoConfigBase, "to"> & {
 };
 
 export const useGo = () => {
-  const bindings = useContext(RouterBindingsContext);
+  const routerContext = useContext(RouterContext);
   const { select: resourceSelect } = useResource();
   const getToPath = useGetToPath();
 
   const useGo = React.useMemo(
-    () => bindings?.go ?? (() => () => undefined),
-    [bindings?.go],
+    () => routerContext?.go ?? (() => () => undefined),
+    [routerContext?.go],
   );
 
   const goFromRouter = useGo();

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

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

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

@@ -1,22 +1,22 @@
-import { RouterBindingsContext } from "@contexts/router";
+import { RouterContext } from "@contexts/router";
 import React, { useContext } from "react";
-import { ParseFunction, ParseResponse } from "src/interfaces";
+import { ParseFunction, ParseResponse } from "../../../contexts/router/types";
 
 type UseParseType = () => <
   TParams extends Record<string, any> = Record<string, any>,
 >() => ParseResponse<TParams>;
 
 export const useParse: UseParseType = () => {
-  const bindings = useContext(RouterBindingsContext);
+  const routerContext = useContext(RouterContext);
 
   const useParse = React.useMemo(
     () =>
-      bindings?.parse ??
+      routerContext?.parse ??
       (() =>
         (() => {
           return {};
         }) as ParseFunction),
-    [bindings?.parse],
+    [routerContext?.parse],
   );
 
   const parse = useParse();

package/src/hooks/router/use-router-misuse-warning/index.ts

@@ -1,8 +1,8 @@
 import { checkRouterPropMisuse } from "@definitions/helpers/check-router-prop-misuse";
 import React from "react";
-import { RouterBindings } from "src/interfaces";
+import { RouterProvider } from "../../../contexts/router/types";
 
-export const useRouterMisuseWarning = (value?: RouterBindings) => {
+export const useRouterMisuseWarning = (value?: RouterProvider) => {
   const warned = React.useRef(false);
 
   React.useEffect(() => {

package/src/hooks/router/use-to-path/index.ts

@@ -1,4 +1,5 @@
-import { Action, IResourceItem } from "../../../interfaces";
+import { IResourceItem } from "../../../contexts/resource/types";
+import { Action } from "../../../contexts/router/types";
 import { useGetToPath } from "../use-get-to-path";
 
 type UseToPathParams = {

package/src/hooks/show/index.ts

@@ -1 +1,92 @@
-export * from "./useShow";
+import warnOnce from "warn-once";
+import { useMeta, useOne, useResourceParams, useLoadingOvertime } from "@hooks";
+import { pickNotDeprecated } from "@definitions/helpers";
+
+import type { UseShowProps, UseShowReturnType } from "./types";
+import { BaseKey, BaseRecord, HttpError } from "../../contexts/data/types";
+
+export type {
+  UseShowProps,
+  UseShowReturnType,
+  useShowProps,
+  useShowReturnType,
+} from "./types";
+
+/**
+ * `useShow` hook allows you to fetch the desired record.
+ * It uses `getOne` method as query function from the dataProvider that is
+ * passed to {@link https://refine.dev/docs/core/refine-component `<Refine>`}.
+ *
+ * @see {@link https://refine.dev/docs/data/hooks/use-show} for more details.
+ *
+ * @typeParam TQueryFnData - Result data returned by the query function. Extends {@link https://refine.dev/docs/core/interface-references/#baserecord `BaseRecord`}
+ * @typeParam TError - Custom error object that extends {@link https://refine.dev/docs/core/interface-references/#httperror `HttpError`}
+ * @typeParam TData - Result data returned by the `select` function. Extends {@link https://refine.dev/docs/core/interface-references/#baserecord `BaseRecord`}. Defaults to `TQueryFnData`
+ *
+ */
+export const useShow = <
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TData extends BaseRecord = TQueryFnData,
+>({
+  resource: resourceFromProp,
+  id,
+  meta,
+  metaData,
+  queryOptions,
+  overtimeOptions,
+  ...useOneProps
+}: UseShowProps<TQueryFnData, TError, TData> = {}): UseShowReturnType<
+  TData,
+  TError
+> => {
+  const {
+    resource,
+    identifier,
+    id: showId,
+    setId: setShowId,
+  } = useResourceParams({
+    id,
+    resource: resourceFromProp,
+  });
+
+  const getMeta = useMeta();
+
+  const combinedMeta = getMeta({
+    resource,
+    meta: pickNotDeprecated(meta, metaData),
+  });
+
+  warnOnce(
+    Boolean(resourceFromProp) && !showId,
+    idWarningMessage(identifier, showId),
+  );
+
+  const queryResult = useOne<TQueryFnData, TError, TData>({
+    resource: identifier,
+    id: showId ?? "",
+    queryOptions: {
+      enabled: showId !== undefined,
+      ...queryOptions,
+    },
+    meta: combinedMeta,
+    metaData: combinedMeta,
+    ...useOneProps,
+  });
+
+  const { elapsedTime } = useLoadingOvertime({
+    isLoading: queryResult.isFetching,
+    interval: overtimeOptions?.interval,
+    onInterval: overtimeOptions?.onInterval,
+  });
+
+  return {
+    queryResult,
+    showId,
+    setShowId,
+    overtime: { elapsedTime },
+  };
+};
+
+const idWarningMessage = (identifier?: string, id?: BaseKey) =>
+  `[useShow]: resource: "${identifier}", id: ${id} \n\nIf you don't use the \`setShowId\` method to set the \`showId\`, you should pass the \`id\` prop to \`useShow\`. Otherwise, \`useShow\` will not be able to infer the \`id\` from the current URL. \n\nSee https://refine.dev/docs/data/hooks/use-show/#resource`;

package/src/hooks/show/types.ts

@@ -0,0 +1,92 @@
+import React from "react";
+
+import type {
+  QueryObserverResult,
+  UseQueryOptions,
+} from "@tanstack/react-query";
+
+import type {
+  UseLoadingOvertimeOptionsProps,
+  UseLoadingOvertimeReturnType,
+} from "../useLoadingOvertime";
+import {
+  BaseKey,
+  BaseRecord,
+  GetOneResponse,
+  HttpError,
+  MetaQuery,
+  Prettify,
+} from "../../contexts/data/types";
+import { LiveModeProps } from "../../contexts/live/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
+
+export type UseShowReturnType<
+  TData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+> = {
+  queryResult: QueryObserverResult<GetOneResponse<TData>, TError>;
+  showId?: BaseKey;
+  setShowId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
+} & UseLoadingOvertimeReturnType;
+
+export type UseShowProps<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TData extends BaseRecord = TQueryFnData,
+> = {
+  /**
+   * Resource name for API data interactions
+   * @default Reads `:resource` from the URL
+   */
+  resource?: string;
+  /**
+   * Data item ID for API data interactions
+   * @default Reads `:id` from the URL
+   */
+  id?: BaseKey;
+  /**
+   * react-query's [useQuery](https://tanstack.com/query/v4/docs/reference/useQuery) options
+   */
+  queryOptions?: UseQueryOptions<
+    GetOneResponse<TQueryFnData>,
+    TError,
+    GetOneResponse<TData>
+  >;
+  /**
+   * Additional meta data to pass to the data provider's `getOne`
+   */
+  meta?: MetaQuery;
+  /**
+   * Additional meta data to pass to the data provider's `getOne`
+   * @deprecated `metaData` is deprecated with refine@4, refine will pass `meta` instead, however, we still support `metaData` for backward compatibility.
+   */
+  metaData?: MetaQuery;
+  /**
+   * Target data provider name for API call to be made
+   * @default `"default"`
+   */
+  dataProviderName?: string;
+} & LiveModeProps &
+  SuccessErrorNotification<
+    GetOneResponse<TData>,
+    TError,
+    Prettify<{ id?: BaseKey } & MetaQuery>
+  > &
+  UseLoadingOvertimeOptionsProps;
+
+/**
+ * @deprecated use `UseShowReturnType` instead
+ */
+export type useShowReturnType<
+  TData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+> = UseShowReturnType<TData, TError>;
+
+/**
+ * @deprecated use `UseShowProps` instead
+ */
+export type useShowProps<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TData extends BaseRecord = TQueryFnData,
+> = UseShowProps<TQueryFnData, TError, TData>;

package/src/hooks/show/useShow.ts

@@ -1,25 +1,26 @@
 import React, { useState } from "react";
+
 import { QueryObserverResult, UseQueryOptions } from "@tanstack/react-query";
 import warnOnce from "warn-once";
 
+import { pickNotDeprecated } from "@definitions/helpers";
 import { useMeta, useOne } from "@hooks";
 
 import {
+  BaseKey,
   BaseRecord,
   GetOneResponse,
-  SuccessErrorNotification,
-  MetaQuery,
-  LiveModeProps,
-  BaseKey,
   HttpError,
+  MetaQuery,
   Prettify,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { LiveModeProps } from "../../contexts/live/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import { useResource } from "../resource/useResource";
-import { pickNotDeprecated } from "@definitions/helpers";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
 export type useShowReturnType<

package/src/hooks/use-refine-options/index.tsx

@@ -0,0 +1,8 @@
+import { RefineContext } from "@contexts/refine";
+import React from "react";
+
+export const useRefineOptions = () => {
+  const { options } = React.useContext(RefineContext);
+
+  return options;
+};

package/src/hooks/use-resource-params/index.ts

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { useId } from "./use-id";
+import { useAction } from "./use-action";
+import { useResource } from "../resource";
+import { BaseKey } from "../../contexts/data/types";
+import { IResourceItem } from "../../contexts/resource/types";
+import { Action } from "../../contexts/router/types";
+import { FormAction } from "../form/types";
+
+type Props = {
+  id?: BaseKey;
+  resource?: string;
+  action?: Action;
+};
+
+type ResourceParams = {
+  id?: BaseKey;
+  setId: React.Dispatch<React.SetStateAction<BaseKey | undefined>>;
+  resource?: IResourceItem;
+  action?: Action;
+  identifier?: string;
+  formAction: FormAction;
+};
+
+/**
+ * Interactions in Refine has 3 main parameters: resource, action and id.
+ *
+ * This hook is used to manage these parameters based on below conditions and outputs the final parameters.
+ *
+ * `resource`: The resource to be used. (either the identifier or the name of the resource)
+ * - If a `resource` is provided, it will be used (even if it's not defined in the <Refine/> component)
+ * - If a `resource` is not provided, it will be inferred from the route.
+ * `id`: The `id` of the record to be used.
+ * - If an `id` is provided, it will be used.
+ * - If an `id` is not provided, it will either be inferred from the route or will be `undefined`.
+ * -- If a custom resource is provided and it's different from the inferred resource, the id will be undefined.
+ * -- If a custom resource is provided and it's same as the inferred resource, the id will be inferred from the route.
+ * -- If a custom resource is not provided, the id will be inferred from the route.
+ * `action`: The action to be used.
+ * - If an `action` is provided, it will be used.
+ * - If an `action` is not provided, it will be inferred from the route.
+ * `formAction`: The action to be used in the form.
+ * - `formAction` can only be "edit", "clone" or "create".
+ * - If action is "edit" or "clone", `formAction` will be the same as action.
+ * - Same as `id`, if passed resource is different from inferred resource, `formAction` will fallback to "create" and ignore the action from the route.
+ */
+export function useResourceParams(props?: Props): ResourceParams {
+  const { select, identifier: inferredIdentifier } = useResource();
+  const resourceToCheck = props?.resource ?? inferredIdentifier;
+  const { identifier = undefined, resource = undefined } = resourceToCheck
+    ? select(resourceToCheck, true)
+    : {};
+
+  const isSameResource = inferredIdentifier === identifier;
+  const inferredId = useId();
+  const action = useAction(props?.action);
+
+  const defaultId = React.useMemo(() => {
+    if (!isSameResource) return props?.id;
+
+    return props?.id ?? inferredId;
+  }, [isSameResource, props?.id, inferredId]);
+
+  const [id, setId] = React.useState<BaseKey | undefined>(defaultId);
+
+  React.useEffect(() => setId(defaultId), [defaultId]);
+
+  const formAction = React.useMemo(() => {
+    if (!isSameResource && !props?.action) {
+      return "create";
+    }
+
+    if (action === "edit" || action === "clone") {
+      return action;
+    }
+
+    return "create";
+  }, [action, isSameResource, props?.action]);
+
+  return {
+    id,
+    setId,
+    resource,
+    action,
+    identifier,
+    formAction,
+  };
+}