@refinedev/core 4.48.0 → 4.49.0

package/src/hooks/button/delete-button/index.tsx

@@ -0,0 +1,101 @@
+import { useTranslate } from "../../i18n";
+import { useDelete } from "../../data/useDelete";
+import { useButtonCanAccess } from "../button-can-access";
+import { useResourceParams } from "../../use-resource-params";
+import { useMutationMode, useWarnAboutChange } from "../../refine";
+
+import type { BaseKey, DeleteOneResponse } from "../../../contexts/data/types";
+import type { CanReturnType } from "../../../contexts/accessControl/types";
+import type { DeleteParams } from "../../data/useDelete";
+
+export type DeleteButtonProps = {
+  resource?: string;
+  id?: BaseKey;
+  dataProviderName?: string;
+  meta?: Record<string, unknown>;
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  onSuccess?: (value: DeleteOneResponse) => void;
+} & Pick<
+  DeleteParams<any, any, any>,
+  "mutationMode" | "successNotification" | "errorNotification" | "invalidates"
+>;
+
+export type DeleteButtonValues = {
+  label: string;
+  title: string;
+  hidden: boolean;
+  loading: boolean;
+  disabled: boolean;
+  canAccess: CanReturnType | undefined;
+  confirmOkLabel: string;
+  cancelLabel: string;
+  confirmTitle: string;
+  onConfirm: () => void;
+};
+
+export function useDeleteButton(props: DeleteButtonProps): DeleteButtonValues {
+  const translate = useTranslate();
+  const { mutate, isLoading, variables } = useDelete();
+  const { setWarnWhen } = useWarnAboutChange();
+  const { mutationMode } = useMutationMode(props.mutationMode);
+
+  const { id, resource, identifier } = useResourceParams({
+    resource: props.resource,
+    id: props.id,
+  });
+
+  const { title, disabled, hidden, canAccess } = useButtonCanAccess({
+    action: "delete",
+    accessControl: props.accessControl,
+    id,
+    resource,
+  });
+
+  const label = translate("buttons.delete", "Delete");
+
+  const confirmOkLabel = translate("buttons.delete", "Delete");
+
+  const confirmTitle = translate("buttons.confirm", "Are you sure?");
+
+  const cancelLabel = translate("buttons.cancel", "Cancel");
+
+  const loading = id === variables?.id && isLoading;
+
+  const onConfirm = () => {
+    if (id && identifier) {
+      setWarnWhen(false);
+      mutate(
+        {
+          id,
+          resource: identifier,
+          mutationMode,
+          successNotification: props.successNotification,
+          errorNotification: props.errorNotification,
+          meta: props.meta,
+          metaData: props.meta,
+          dataProviderName: props.dataProviderName,
+          invalidates: props.invalidates,
+        },
+        {
+          onSuccess: props.onSuccess,
+        },
+      );
+    }
+  };
+
+  return {
+    label,
+    title,
+    hidden,
+    disabled,
+    canAccess,
+    loading,
+    confirmOkLabel,
+    cancelLabel,
+    confirmTitle,
+    onConfirm,
+  };
+}

package/src/hooks/button/index.tsx

@@ -0,0 +1,35 @@
+import { useActionableButton } from "./actionable-button";
+import { useNavigationButton } from "./navigation-button";
+
+import type { NavigationButtonProps } from "./navigation-button";
+import type { Prettify } from "../../contexts/data/types";
+
+export { useDeleteButton } from "./delete-button";
+
+export { useRefreshButton } from "./refresh-button";
+
+export const useShowButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "show" });
+
+export const useEditButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "edit" });
+
+export const useCloneButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action">>,
+) => useNavigationButton({ ...props, action: "clone" });
+
+export const useCreateButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action" | "id">>,
+) => useNavigationButton({ ...props, action: "create" });
+
+export const useListButton = (
+  props: Prettify<Omit<NavigationButtonProps, "action" | "id">>,
+) => useNavigationButton({ ...props, action: "list" });
+
+export const useSaveButton = () => useActionableButton({ type: "save" });
+
+export const useExportButton = () => useActionableButton({ type: "export" });
+
+export const useImportButton = () => useActionableButton({ type: "import" });

package/src/hooks/button/navigation-button/index.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { useUserFriendlyName } from "../../../definitions/helpers/useUserFriendlyName";
+import { useRouterType } from "../../../contexts/router/picker";
+import { useResourceParams } from "../../use-resource-params";
+import { useRefineOptions } from "../../use-refine-options";
+import { useButtonCanAccess } from "../button-can-access";
+import { useRouterContext } from "../../legacy-router";
+import { useNavigation } from "../../navigation";
+import { useTranslate } from "../../i18n";
+import { useLink } from "../../router";
+
+import type { BaseKey } from "../../../contexts/data/types";
+import type { Action } from "../../../contexts/router/types";
+import type { CanReturnType } from "../../../contexts/accessControl/types";
+
+export type NavigationButtonProps = {
+  action: Action;
+  id?: BaseKey;
+  resource?: string;
+  meta?: Record<string, unknown>;
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+};
+
+export type NavigationButtonValues = {
+  to: string;
+  label: string;
+  disabled: boolean;
+  title: string;
+  hidden: boolean;
+  canAccess: CanReturnType | undefined;
+  LinkComponent: React.ComponentType<
+    React.PropsWithChildren<{
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      [prop: string]: any;
+      to: string;
+    }>
+  >;
+};
+
+export function useNavigationButton(
+  props: NavigationButtonProps,
+): NavigationButtonValues {
+  const navigation = useNavigation();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+  const {
+    textTransformers: { humanize },
+  } = useRefineOptions();
+
+  const { id, resource, identifier } = useResourceParams({
+    resource: props.resource,
+    id: props.action === "create" ? undefined : props.id,
+  });
+
+  const { canAccess, title, hidden, disabled } = useButtonCanAccess({
+    action: props.action,
+    accessControl: props.accessControl,
+    id,
+    resource,
+  });
+
+  const LinkComponent = routerType === "legacy" ? LegacyLink : Link;
+
+  const to = React.useMemo(() => {
+    if (!resource) return "";
+    switch (props.action) {
+      case "create":
+      case "list":
+        return navigation[`${props.action}Url`](resource, props.meta);
+      default:
+        if (!id) return "";
+        return navigation[`${props.action}Url`](resource, id, props.meta);
+    }
+  }, [resource, id, props.meta, navigation[`${props.action}Url`]]);
+
+  const label =
+    props.action === "list"
+      ? translate(
+          `${identifier ?? props.resource}.titles.list`,
+          getUserFriendlyName(
+            resource?.meta?.label ??
+              resource?.label ??
+              identifier ??
+              props.resource,
+            "plural",
+          ),
+        )
+      : translate(`buttons.${props.action}`, humanize(props.action));
+
+  return {
+    to,
+    label,
+    title,
+    disabled,
+    hidden,
+    canAccess,
+    LinkComponent,
+  };
+}

package/src/hooks/button/refresh-button/index.tsx

@@ -0,0 +1,65 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useTranslate } from "../../i18n";
+import { useInvalidate } from "../../invalidate";
+import { useResourceParams } from "../../use-resource-params";
+import { useResource } from "../../resource";
+import { useKeys } from "../../useKeys";
+import { pickDataProvider } from "../../../definitions";
+
+import type { BaseKey } from "../../../contexts/data/types";
+
+export type RefreshButtonProps = {
+  resource?: string;
+  id?: BaseKey;
+  dataProviderName?: string;
+  meta?: Record<string, unknown>;
+};
+
+export type RefreshButtonValues = {
+  onClick: () => void;
+  label: string;
+  loading: boolean;
+};
+
+export function useRefreshButton(
+  props: RefreshButtonProps,
+): RefreshButtonValues {
+  const translate = useTranslate();
+  const { keys, preferLegacyKeys } = useKeys();
+
+  const queryClient = useQueryClient();
+  const invalidates = useInvalidate();
+
+  const { identifier, id } = useResourceParams({
+    resource: props.resource,
+    id: props.id,
+  });
+
+  const { resources } = useResource();
+
+  const loading = !!queryClient.isFetching({
+    queryKey: keys()
+      .data(pickDataProvider(identifier, props.dataProviderName, resources))
+      .resource(identifier)
+      .action("one")
+      .get(preferLegacyKeys),
+  });
+
+  const onClick = () => {
+    invalidates({
+      id,
+      invalidates: ["detail"],
+      dataProviderName: props.dataProviderName,
+      resource: identifier,
+    });
+  };
+
+  const label = translate("buttons.refresh", "Refresh");
+
+  return {
+    onClick,
+    label,
+    loading,
+  };
+}

package/src/hooks/data/useCreate.ts

@@ -5,15 +5,16 @@ import {
 } from "@definitions/helpers";
 import { getXRay } from "@refinedev/devtools-internal";
 import {
-  useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useMutation,
 } from "@tanstack/react-query";
 
 import {
   useDataProvider,
   useHandleNotification,
   useInvalidate,
+  useKeys,
   useLog,
   useMeta,
   useOnError,
@@ -22,22 +23,22 @@ import {
   useResource,
   useTranslate,
 } from "@hooks";
-import { useKeys } from "@hooks/useKeys";
+
 import {
   BaseRecord,
   CreateResponse,
   HttpError,
   IQueryKeys,
   MetaQuery,
-  SuccessErrorNotification,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
-type useCreateParams<TData, TError, TVariables> = {
+export type UseCreateParams<TData, TError, TVariables> = {
   /**
    * Resource name for API data interactions
    */
@@ -72,7 +73,7 @@ export type UseCreateReturnType<
 > = UseMutationResult<
   CreateResponse<TData>,
   TError,
-  useCreateParams<TData, TError, TVariables>,
+  UseCreateParams<TData, TError, TVariables>,
   unknown
 >;
 
@@ -85,7 +86,7 @@ export type UseCreateProps<
     UseMutationOptions<
       CreateResponse<TData>,
       TError,
-      useCreateParams<TData, TError, TVariables>,
+      UseCreateParams<TData, TError, TVariables>,
       unknown
     >,
     "mutationFn" | "onError" | "onSuccess"
@@ -138,7 +139,7 @@ export const useCreate = <
   const mutation = useMutation<
     CreateResponse<TData>,
     TError,
-    useCreateParams<TData, TError, TVariables>,
+    UseCreateParams<TData, TError, TVariables>,
     unknown
   >({
     mutationFn: ({
@@ -147,7 +148,7 @@ export const useCreate = <
       meta,
       metaData,
       dataProviderName,
-    }: useCreateParams<TData, TError, TVariables>) => {
+    }: UseCreateParams<TData, TError, TVariables>) => {
       const { resource, identifier } = select(resourceName);
 
       const combinedMeta = getMeta({

package/src/hooks/data/useCreateMany.ts

@@ -1,8 +1,8 @@
 import { getXRay } from "@refinedev/devtools-internal";
 import {
-  useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useMutation,
 } from "@tanstack/react-query";
 
 import {
@@ -14,6 +14,7 @@ import {
   useDataProvider,
   useHandleNotification,
   useInvalidate,
+  useKeys,
   useLog,
   useMeta,
   usePublish,
@@ -21,19 +22,19 @@ import {
   useResource,
   useTranslate,
 } from "@hooks";
-import { useKeys } from "@hooks/useKeys";
+
 import {
   BaseRecord,
   CreateManyResponse,
   HttpError,
   IQueryKeys,
   MetaQuery,
-  SuccessErrorNotification,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
 type useCreateManyParams<TData, TError, TVariables> = {

package/src/hooks/data/useCustom.ts

@@ -1,42 +1,43 @@
+import { getXRay } from "@refinedev/devtools-internal";
 import {
   QueryObserverResult,
-  useQuery,
   UseQueryOptions,
+  useQuery,
 } from "@tanstack/react-query";
-import { getXRay } from "@refinedev/devtools-internal";
 
 import { pickNotDeprecated, useActiveAuthProvider } from "@definitions/helpers";
 import {
   useDataProvider,
   useHandleNotification,
+  useKeys,
   useMeta,
   useOnError,
   useTranslate,
 } from "@hooks";
+
 import {
   BaseRecord,
-  CrudFilters,
-  CrudSorting,
+  CrudFilter,
+  CrudSort,
   CustomResponse,
   HttpError,
   MetaQuery,
   Prettify,
-  SuccessErrorNotification,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
-import { useKeys } from "@hooks/useKeys";
 
 interface UseCustomConfig<TQuery, TPayload> {
   /**
    * @deprecated `sort` is deprecated, use `sorters` instead.
    */
-  sort?: CrudSorting;
-  sorters?: CrudSorting;
-  filters?: CrudFilters;
+  sort?: CrudSort[];
+  sorters?: CrudSort[];
+  filters?: CrudFilter[];
   query?: TQuery;
   payload?: TPayload;
   headers?: {};

package/src/hooks/data/useCustomMutation.ts

@@ -1,32 +1,33 @@
+import { getXRay } from "@refinedev/devtools-internal";
 import {
-  useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useMutation,
 } from "@tanstack/react-query";
-import { getXRay } from "@refinedev/devtools-internal";
 
+import { pickNotDeprecated, useActiveAuthProvider } from "@definitions/helpers";
 import {
   useDataProvider,
   useHandleNotification,
-  useTranslate,
-  useOnError,
+  useKeys,
   useMeta,
+  useOnError,
+  useTranslate,
 } from "@hooks";
+
 import {
-  CreateResponse,
   BaseRecord,
+  CreateResponse,
   HttpError,
-  SuccessErrorNotification,
   MetaQuery,
   Prettify,
-} from "../../interfaces";
-import { pickNotDeprecated, useActiveAuthProvider } from "@definitions/helpers";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
-import { useKeys } from "@hooks/useKeys";
 
 interface UseCustomMutationConfig {
   headers?: {};

package/src/hooks/data/useDataProvider.tsx

@@ -1,19 +1,14 @@
 import { useCallback, useContext } from "react";
 
 import { DataContext } from "@contexts/data";
-import {
-  IDataContextProvider,
-  IDataMultipleContextProvider,
-} from "../../interfaces";
-
+import { DataProvider, IDataContext } from "../../contexts/data/types";
 export const useDataProvider = (): ((
   /**
    * The name of the `data provider` you want to access
    */
   dataProviderName?: string,
-) => IDataContextProvider) => {
-  const context =
-    useContext<Partial<IDataMultipleContextProvider>>(DataContext);
+) => DataProvider) => {
+  const context = useContext(DataContext);
 
   const handleDataProvider = useCallback(
     (dataProviderName?: string) => {
@@ -22,11 +17,20 @@ export const useDataProvider = (): ((
         if (!dataProvider) {
           throw new Error(`"${dataProviderName}" Data provider not found`);
         }
+
+        if (dataProvider && !context?.default) {
+          throw new Error(
+            "If you have multiple data providers, you must provide default data provider property",
+          );
+        }
+
         return context[dataProviderName];
       }
+
       if (context.default) {
         return context.default;
       }
+
       throw new Error(
         `There is no "default" data provider. Please pass dataProviderName.`,
       );

package/src/hooks/data/useDelete.ts

@@ -1,12 +1,11 @@
 import { getXRay } from "@refinedev/devtools-internal";
 import {
-  useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
 
-import { ActionTypes } from "@contexts/undoableQueue";
 import {
   pickDataProvider,
   pickNotDeprecated,
@@ -18,6 +17,7 @@ import {
   useDataProvider,
   useHandleNotification,
   useInvalidate,
+  useKeys,
   useLog,
   useMeta,
   useMutationMode,
@@ -27,7 +27,7 @@ import {
   useResource,
   useTranslate,
 } from "@hooks";
-import { useKeys } from "@hooks/useKeys";
+
 import {
   BaseKey,
   BaseRecord,
@@ -39,12 +39,13 @@ import {
   MutationMode,
   PrevContext as DeleteContext,
   PreviousQuery,
-  SuccessErrorNotification,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
+import { ActionTypes } from "../../contexts/undoableQueue/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
 export type DeleteParams<TData, TError, TVariables> = {

package/src/hooks/data/useDeleteMany.ts

@@ -1,12 +1,11 @@
 import { getXRay } from "@refinedev/devtools-internal";
 import {
-  useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
 
-import { ActionTypes } from "@contexts/undoableQueue";
 import {
   handleMultiple,
   pickDataProvider,
@@ -19,6 +18,7 @@ import {
   useDataProvider,
   useHandleNotification,
   useInvalidate,
+  useKeys,
   useLog,
   useMeta,
   useMutationMode,
@@ -28,7 +28,7 @@ import {
   useResource,
   useTranslate,
 } from "@hooks";
-import { useKeys } from "@hooks/useKeys";
+
 import {
   BaseKey,
   BaseRecord,
@@ -40,12 +40,13 @@ import {
   MutationMode,
   PrevContext as DeleteContext,
   PreviousQuery,
-  SuccessErrorNotification,
-} from "../../interfaces";
+} from "../../contexts/data/types";
+import { SuccessErrorNotification } from "../../contexts/notification/types";
+import { ActionTypes } from "../../contexts/undoableQueue/types";
 import {
-  useLoadingOvertime,
   UseLoadingOvertimeOptionsProps,
   UseLoadingOvertimeReturnType,
+  useLoadingOvertime,
 } from "../useLoadingOvertime";
 
 export type DeleteManyParams<TData, TError, TVariables> = {