@refinedev/core 4.47.2 → 4.48.0

package/src/components/authenticated/index.tsx

@@ -1,60 +1,60 @@
 import React from "react";
 
 import {
-    useGo,
-    useNavigation,
-    useParsed,
-    useRouterContext,
-    useRouterType,
-    useIsAuthenticated,
+  useGo,
+  useNavigation,
+  useParsed,
+  useRouterContext,
+  useRouterType,
+  useIsAuthenticated,
 } from "@hooks";
 import { useActiveAuthProvider } from "@definitions/index";
 import { GoConfig } from "src/interfaces";
 
 export type AuthenticatedCommonProps = {
-    /**
-     * Unique key to identify the component.
-     * This is required if you have multiple `Authenticated` components at the same level.
-     * @required
-     */
-    key: React.Key;
-    /**
-     * 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**.
-     */
-    redirectOnFail?: string | true;
-    /**
-     * Whether to append current path to search params of the redirect url at `to` property.
-     *
-     * By default, `to` parameter is used by successful invocations of the `useLogin` hook.
-     * If `to` present, it will be used as the redirect url after successful login.
-     */
-    appendCurrentPathToQuery?: boolean;
-    /**
-     * Content to show if user is not logged in.
-     */
-    fallback?: React.ReactNode;
-    /**
-     * Content to show while checking whether user is logged in or not.
-     */
-    loading?: React.ReactNode;
-    /**
-     * Content to show if user is logged in
-     */
-    children?: React.ReactNode;
+  /**
+   * Unique key to identify the component.
+   * This is required if you have multiple `Authenticated` components at the same level.
+   * @required
+   */
+  key: React.Key;
+  /**
+   * 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**.
+   */
+  redirectOnFail?: string | true;
+  /**
+   * Whether to append current path to search params of the redirect url at `to` property.
+   *
+   * By default, `to` parameter is used by successful invocations of the `useLogin` hook.
+   * If `to` present, it will be used as the redirect url after successful login.
+   */
+  appendCurrentPathToQuery?: boolean;
+  /**
+   * Content to show if user is not logged in.
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Content to show while checking whether user is logged in or not.
+   */
+  loading?: React.ReactNode;
+  /**
+   * Content to show if user is logged in
+   */
+  children?: React.ReactNode;
 };
 
 export type LegacyAuthenticatedProps = {
-    v3LegacyAuthProviderCompatible: true;
+  v3LegacyAuthProviderCompatible: true;
 } & AuthenticatedCommonProps;
 
 export type AuthenticatedProps = {
-    v3LegacyAuthProviderCompatible?: false;
+  v3LegacyAuthProviderCompatible?: false;
 } & AuthenticatedCommonProps;
 
 /**
@@ -72,7 +72,7 @@ export type AuthenticatedProps = {
  * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
  */
 export function Authenticated(
-    props: LegacyAuthenticatedProps,
+  props: LegacyAuthenticatedProps,
 ): JSX.Element | null;
 
 /**
@@ -92,131 +92,129 @@ export function Authenticated(
 export function Authenticated(props: AuthenticatedProps): JSX.Element | null;
 
 export function Authenticated({
-    redirectOnFail = true,
-    appendCurrentPathToQuery = true,
-    children,
-    fallback: fallbackContent,
-    loading: loadingContent,
+  redirectOnFail = true,
+  appendCurrentPathToQuery = true,
+  children,
+  fallback: fallbackContent,
+  loading: loadingContent,
 }: AuthenticatedProps | LegacyAuthenticatedProps): 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,
-    });
-
-    // Authentication status
-    const isAuthenticated = hasAuthProvider
-        ? isLegacyAuth
-            ? isSuccess
-            : isAuthenticatedStatus
-        : true;
-
-    // when there is no auth provider
-    if (!hasAuthProvider) {
-        return <>{children ?? null}</>;
-    }
-
-    // when checking authentication status
-    if (isFetching) {
-        return <>{loadingContent ?? null}</>;
-    }
-
-    // when user is authenticated return children
-    if (isAuthenticated) {
-        return <>{children ?? null}</>;
-    }
-    // when user is not authenticated redirect or render fallbackContent
-    else {
-        // render fallbackContent if it is exist
-        if (typeof fallbackContent !== "undefined") {
-            return <>{fallbackContent ?? null}</>;
-        }
-        // if there is no fallbackContent, redirect page
-
-        // 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"
-            ? 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(/(\?.*|#.*)$/, "");
-        // 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}`} />;
-            } else {
-                return (
-                    <Redirect
-                        config={{
-                            to: appliedRedirect,
-                            query: appendCurrentPathToQuery
-                                ? {
-                                      to: parsed.params?.to
-                                          ? parsed.params.to
-                                          : go({
-                                                to: pathname,
-                                                options: { keepQuery: true },
-                                                type: "path",
-                                            }),
-                                  }
-                                : undefined,
-                            type: "replace",
-                        }}
-                    />
-                );
-            }
-        }
-
-        return 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,
+  });
+
+  // Authentication status
+  const isAuthenticated = hasAuthProvider
+    ? isLegacyAuth
+      ? isSuccess
+      : isAuthenticatedStatus
+    : true;
+
+  // when there is no auth provider
+  if (!hasAuthProvider) {
+    return <>{children ?? null}</>;
+  }
+
+  // when checking authentication status
+  if (isFetching) {
+    return <>{loadingContent ?? null}</>;
+  }
+
+  // when user is authenticated return children
+  if (isAuthenticated) {
+    return <>{children ?? null}</>;
+  }
+  // when user is not authenticated redirect or render fallbackContent
+
+  // render fallbackContent if it is exist
+  if (typeof fallbackContent !== "undefined") {
+    return <>{fallbackContent ?? null}</>;
+  }
+  // if there is no fallbackContent, redirect page
+
+  // 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"
+      ? 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(/(\?.*|#.*)$/, "");
+  // 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}`} />;
     }
+    return (
+      <Redirect
+        config={{
+          to: appliedRedirect,
+          query: appendCurrentPathToQuery
+            ? {
+                to: parsed.params?.to
+                  ? parsed.params.to
+                  : go({
+                      to: pathname,
+                      options: { keepQuery: true },
+                      type: "path",
+                    }),
+              }
+            : undefined,
+          type: "replace",
+        }}
+      />
+    );
+  }
+
+  return null;
 }
 
 const Redirect = ({ config }: { config: GoConfig }) => {
-    const go = useGo();
+  const go = useGo();
 
-    React.useEffect(() => {
-        go(config);
-    }, [go, config]);
+  React.useEffect(() => {
+    go(config);
+  }, [go, config]);
 
-    return null;
+  return null;
 };
 
 const RedirectLegacy = ({ to }: { to: string }) => {
-    const { replace } = useNavigation();
+  const { replace } = useNavigation();
 
-    React.useEffect(() => {
-        replace(to);
-    }, [replace, to]);
+  React.useEffect(() => {
+    replace(to);
+  }, [replace, to]);
 
-    return null;
+  return null;
 };

package/src/components/autoSaveIndicator/index.tsx

@@ -3,38 +3,34 @@ import { AutoSaveIndicatorProps } from "../../interfaces";
 import { useTranslate } from "@hooks/translate";
 
 export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
-    status,
-    elements: {
-        success = <Message key="autoSave.success" defaultMessage="saved" />,
-        error = (
-            <Message key="autoSave.error" defaultMessage="auto save failure" />
-        ),
-        loading = <Message key="autoSave.loading" defaultMessage="saving..." />,
-        idle = (
-            <Message key="autoSave.idle" defaultMessage="waiting for changes" />
-        ),
-    } = {},
+  status,
+  elements: {
+    success = <Message key="autoSave.success" defaultMessage="saved" />,
+    error = <Message key="autoSave.error" defaultMessage="auto save failure" />,
+    loading = <Message key="autoSave.loading" defaultMessage="saving..." />,
+    idle = <Message key="autoSave.idle" defaultMessage="waiting for changes" />,
+  } = {},
 }) => {
-    switch (status) {
-        case "success":
-            return <>{success}</>;
-        case "error":
-            return <>{error}</>;
-        case "loading":
-            return <>{loading}</>;
-        default:
-            return <>{idle}</>;
-    }
+  switch (status) {
+    case "success":
+      return <>{success}</>;
+    case "error":
+      return <>{error}</>;
+    case "loading":
+      return <>{loading}</>;
+    default:
+      return <>{idle}</>;
+  }
 };
 
 const Message = ({
-    key,
-    defaultMessage,
+  key,
+  defaultMessage,
 }: {
-    key: string;
-    defaultMessage: string;
+  key: string;
+  defaultMessage: string;
 }) => {
-    const translate = useTranslate();
+  const translate = useTranslate();
 
-    return <span>{translate(key, defaultMessage)}</span>;
+  return <span>{translate(key, defaultMessage)}</span>;
 };

package/src/components/canAccess/index.tsx

@@ -7,120 +7,120 @@ import { UseQueryOptions } from "@tanstack/react-query";
 import { CanReturnType } from "../../interfaces";
 
 type CanParams = {
-    resource?: IResourceItem & { children?: ITreeMenu[] };
-    id?: BaseKey;
-    [key: string]: any;
+  resource?: IResourceItem & { children?: ITreeMenu[] };
+  id?: BaseKey;
+  [key: string]: any;
 };
 
 type OnUnauthorizedProps = {
-    resource?: string;
-    reason?: string;
-    action: string;
-    params: CanParams;
+  resource?: string;
+  reason?: string;
+  action: string;
+  params: CanParams;
 };
 
 type CanAccessBaseProps = {
-    /**
-     * Resource name for API data interactions
-     */
-    resource?: string;
-    /**
-     * Intended action on resource
-     */
-    action: string;
-    /**
-     * Parameters associated with the resource
-     * @type { resource?: [IResourceItem](https://refine.dev/docs/api-reference/core/interfaceReferences/#canparams), id?: [BaseKey](https://refine.dev/docs/api-reference/core/interfaceReferences/#basekey), [key: string]: any }
-     */
-    params?: CanParams;
-    /**
-     * Content to show if access control returns `false`
-     */
-    fallback?: React.ReactNode;
-    /**
-     * Callback function to be called if access control returns `can: false`
-     */
-    onUnauthorized?: (props: OnUnauthorizedProps) => void;
-    children: React.ReactNode;
-    queryOptions?: UseQueryOptions<CanReturnType>;
+  /**
+   * Resource name for API data interactions
+   */
+  resource?: string;
+  /**
+   * Intended action on resource
+   */
+  action: string;
+  /**
+   * Parameters associated with the resource
+   * @type { resource?: [IResourceItem](https://refine.dev/docs/api-reference/core/interfaceReferences/#canparams), id?: [BaseKey](https://refine.dev/docs/api-reference/core/interfaceReferences/#basekey), [key: string]: any }
+   */
+  params?: CanParams;
+  /**
+   * Content to show if access control returns `false`
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Callback function to be called if access control returns `can: false`
+   */
+  onUnauthorized?: (props: OnUnauthorizedProps) => void;
+  children: React.ReactNode;
+  queryOptions?: UseQueryOptions<CanReturnType>;
 };
 
 type CanAccessWithoutParamsProps = {
-    [key in Exclude<
-        keyof CanAccessBaseProps,
-        "fallback" | "children"
-    >]?: undefined;
+  [key in Exclude<
+    keyof CanAccessBaseProps,
+    "fallback" | "children"
+  >]?: undefined;
 } & {
-    [key in "fallback" | "children"]?: CanAccessBaseProps[key];
+  [key in "fallback" | "children"]?: CanAccessBaseProps[key];
 };
 
 export type CanAccessProps = CanAccessBaseProps | CanAccessWithoutParamsProps;
 
 export const CanAccess: React.FC<CanAccessProps> = ({
-    resource: resourceFromProp,
-    action: actionFromProp,
-    params: paramsFromProp,
-    fallback,
-    onUnauthorized,
-    children,
-    queryOptions: componentQueryOptions,
-    ...rest
+  resource: resourceFromProp,
+  action: actionFromProp,
+  params: paramsFromProp,
+  fallback,
+  onUnauthorized,
+  children,
+  queryOptions: componentQueryOptions,
+  ...rest
 }) => {
-    const {
-        resource,
-        id: idFromRoute,
-        action: actionFromRoute,
-    } = useResource(resourceFromProp);
-    const { identifier } = useResource();
-
-    const getDefaultId = () => {
-        const idFromPropsOrRoute = paramsFromProp?.id ?? idFromRoute;
-
-        if (resourceFromProp && resourceFromProp !== identifier) {
-            return paramsFromProp?.id;
-        }
-
-        return idFromPropsOrRoute;
-    };
-    const defaultId = getDefaultId();
-
-    const resourceName = resourceFromProp ?? resource?.name;
-    const action = actionFromProp ?? actionFromRoute ?? "";
-    const params = paramsFromProp ?? {
-        id: defaultId,
-        resource: resource,
-    };
-
-    const { data } = useCan({
+  const {
+    resource,
+    id: idFromRoute,
+    action: actionFromRoute,
+  } = useResource(resourceFromProp);
+  const { identifier } = useResource();
+
+  const getDefaultId = () => {
+    const idFromPropsOrRoute = paramsFromProp?.id ?? idFromRoute;
+
+    if (resourceFromProp && resourceFromProp !== identifier) {
+      return paramsFromProp?.id;
+    }
+
+    return idFromPropsOrRoute;
+  };
+  const defaultId = getDefaultId();
+
+  const resourceName = resourceFromProp ?? resource?.name;
+  const action = actionFromProp ?? actionFromRoute ?? "";
+  const params = paramsFromProp ?? {
+    id: defaultId,
+    resource: resource,
+  };
+
+  const { data } = useCan({
+    resource: resourceName,
+    action,
+    params,
+    queryOptions: componentQueryOptions,
+  });
+
+  useEffect(() => {
+    if (onUnauthorized && data?.can === false) {
+      onUnauthorized({
         resource: resourceName,
         action,
+        reason: data?.reason,
         params,
-        queryOptions: componentQueryOptions, 
-    });
-
-    useEffect(() => {
-        if (onUnauthorized && data?.can === false) {
-            onUnauthorized({
-                resource: resourceName,
-                action,
-                reason: data?.reason,
-                params,
-            });
-        }
-    }, [data?.can]);
-
-    if (data?.can) {
-        if (React.isValidElement(children)) {
-            const Children = React.cloneElement(children, rest);
-            return Children;
-        }
-
-        return <>{children}</>;
+      });
     }
+  }, [data?.can]);
 
-    if (data?.can === false) {
-        return <>{fallback ?? null}</>;
+  if (data?.can) {
+    if (React.isValidElement(children)) {
+      const Children = React.cloneElement(children, rest);
+      return Children;
     }
 
-    return null;
+    return <>{children}</>;
+  }
+
+  if (data?.can === false) {
+    return <>{fallback ?? null}</>;
+  }
+
+  return null;
 };