@refinedev/core 4.45.1 → 4.46.0

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @refinedev/core
 
+## 4.46.0
+
+### Minor Changes
+
+-   [#5343](https://github.com/refinedev/refine/pull/5343) [`dd8f1270f6`](https://github.com/refinedev/refine/commit/dd8f1270f692d1eec279973e53fcc5a7e650b983) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - fix: `hideForm` should remove all form fields. (submit button, form fields, rememberMe checkbox, forgot password link, etc.) but the `/register` link should be visible.
+
+-   [#5307](https://github.com/refinedev/refine/pull/5307) [`f8e407f850`](https://github.com/refinedev/refine/commit/f8e407f85054bccf1e6ff45c84928bc01db7f5eb) Thanks [@jackprogramsjp](https://github.com/jackprogramsjp)! - feat: added `hideForm` props for `LoginPage` and `RegisterPage` for `AuthPage` feature.
+
+    Now with the `hideForm` props feature, you can be able to hide the forms (like email/password)
+    to only show the OAuth providers. This avoids having to make your own entire AuthPage.
+
+### Patch Changes
+
+-   [#5323](https://github.com/refinedev/refine/pull/5323) [`17aa8c1cd6`](https://github.com/refinedev/refine/commit/17aa8c1cd6858c5a2b0c996c97230047e049bf3b) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - ### Breaking changes
+
+    fix: added required `key` prop to `<Auhtenticated />` component to resolve issues of rendering of the unwanted content and wrongful redirections. #4782
+
+    #### Why is it required?
+
+    Due to the [nature of React](https://react.dev/learn/rendering-lists#why-does-react-need-keys), components are not unmounted and remounted again if props are changed. While this is mostly a good practice for performance, in some cases you'll want your component to re-mount instead of updating; for example, if you don't want to use any of the previous states and effects initiated with the old props.
+
+    The `<Authenticated />` component has this kind of scenario when it's used for page-level authentication checks. If the previous check results were used for the rendering of the content (`fallback` or `children`) this may lead to unexpected behaviors and flashing of the unwanted content.
+
+    To avoid this, a key property must be set with different values for each use of the `<Authenticated />` components. This will make sure that React will unmount and remount the component instead of updating the props.
+
+    ```tsx
+    import { Refine, Authenticated, AuthPage } from "@refinedev/core";
+    import {
+      CatchAllNavigate,
+    } from "@refinedev/react-router-v6";
+    import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";
+
+    const App = () => {
+      return (
+        <BrowserRouter>
+          <Refine {/* ... */}>
+            <Routes>
+              <Route
+                element={
+                  <Authenticated
+                    key="authenticated-routes"
+                    fallback={<CatchAllNavigate to="/login" />}
+                  >
+                    <Outlet />
+                  </Authenticated>
+                }
+              >
+                <Route index element={<h1>Dashboard Page</h1>} />
+              </Route>
+
+              <Route
+                element={
+                  <Authenticated key="unauthenticated-routes" fallback={<Outlet />}>
+                     <Navigate to="/" replace />
+                  </Authenticated>
+                }
+              >
+                <Route path="/login" element={<AuthPage type="login" />} />
+              </Route>
+            </Routes>
+          </Refine>
+        </BrowserRouter>
+      );
+    };
+    ```
+
+    In the example above, the `<Authenticated />` is rendered as the wrapper of both the `index` route and `/login` route. Without a `key` property, `<Authenticated />` will not be re-mounted and can result in rendering the content depending on the previous authentication check. This will lead to redirecting to `/login` when trying to access the `index` route instead of rendering the content of the `index` or navigating to `index` route instead of `/login` if the user just logged out.
+
+-   [#5339](https://github.com/refinedev/refine/pull/5339) [`4c49ef0a06`](https://github.com/refinedev/refine/commit/4c49ef0a0660c2941c983025a187d45b521aa27c) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - feat: `<WelcomePage />` component redesigned.
+
+-   [#5316](https://github.com/refinedev/refine/pull/5316) [`3bdb9cb1cb`](https://github.com/refinedev/refine/commit/3bdb9cb1cb4cdcfaf363e7e9938737ed6f8e634e) Thanks [@ksankeerth](https://github.com/ksankeerth)! - fix: Return type is not mentioned correctly in useOne, useSelect, useForm, useMany and useShow hooks
+
+    This fix has improved type safety of return type of useOne, useSelect, useForm, useMany and useShow hooks.
+
 ## 4.45.1
 
 ### Patch Changes

package/README.md

@@ -18,7 +18,6 @@
 <br/>
 <br/>
 
-
 <div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open-source, headless web application framework developed with flexibility in mind.
 
 <br />
@@ -36,7 +35,6 @@
 [![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
 [![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
 
-
 <a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 </div>
@@ -71,7 +69,7 @@ This means you can use Refine seamlessly on different platforms like React Nativ
 
 ## ⚡ Try Refine
 
-Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser. 
+Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser.
 
 You have the freedom to select your preferred libraries and frameworks, and the tool generates a ready-to-download boilerplate code. This feature not only lets you preview and tweak your project on the fly but also accelerates the overall development workflow.
 
@@ -89,12 +87,12 @@ You have the freedom to select your preferred libraries and frameworks, and the
 
 You can take a look at some live examples that can be built using **refine** from scratch:
 
--   [Fully-functional CRM Application](https://example.crm.refine.dev/)
--   [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
--   [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
--   [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
--   [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
--   [Storefront](https://s.refine.dev/readme-ssr-storefront)
+- [Fully-functional CRM Application](https://example.crm.refine.dev/)
+- [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
+- [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
+- [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
+- [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
+- [Storefront](https://s.refine.dev/readme-ssr-storefront)
 
 [👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
 
@@ -134,7 +132,7 @@ You can take a look at some live examples that can be built using **refine** fro
 
 There are two ways to create a Refine app: either by using the `create refine-app` CLI tool or the [browser-based app scaffolder](https://refine.dev/#playground).
 
-To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command. 
+To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command.
 
 ```
 npm create refine-app@latest -- -o refine-antd
@@ -146,7 +144,6 @@ Once the setup is complete, navigate to the project folder and start your projec
 npm run dev
 ```
 
-
 <br/>
 
 Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
@@ -155,21 +152,20 @@ Your **Refine** application will be accessible at [http://localhost:5173](http:/
 
 <br/>
 
-
 > Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
 >
->```
->npm create refine-app@latest
->```
+> ```
+> npm create refine-app@latest
+> ```
 
 Let's consume a public `fake REST API` and add two resources (_blog_posts_ and _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
 
 ```tsx title="src/App.tsx"
 import { Refine } from "@refinedev/core";
 import {
-    notificationProvider,
-    ErrorComponent,
-    ThemedLayout,
+  notificationProvider,
+  ErrorComponent,
+  ThemedLayout,
 } from "@refinedev/antd";
 import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
 import dataProvider from "@refinedev/simple-rest";
@@ -181,62 +177,53 @@ import { AntdInferencer } from "@refinedev/inferencer/antd";
 import "@refinedev/antd/dist/reset.css";
 
 const App: React.FC = () => {
-    return (
-        <BrowserRouter>
-            <Refine
-                routerProvider={routerProvider}
-                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-                notificationProvider={notificationProvider}
-                resources={[
-                    {
-                        name: "blog_posts",
-                        list: "/blog-posts",
-                        show: "/blog-posts/show/:id",
-                        create: "/blog-posts/create",
-                        edit: "/blog-posts/edit/:id",
-                        meta: { canDelete: true },
-                    },
-                    {
-                        name: "categories",
-                        list: "/categories",
-                        show: "/categories/show/:id",
-                    },
-                ]}
-            >
-                <Routes>
-                    <Route
-                        element={
-                            <ThemedLayout>
-                                <Outlet />
-                            </ThemedLayout>
-                        }
-                    >
-                        <Route index element={<NavigateToResource />} />
-                        <Route path="blog-posts">
-                            <Route index element={<AntdInferencer />} />
-                            <Route
-                                path="show/:id"
-                                element={<AntdInferencer />}
-                            />
-                            <Route path="create" element={<AntdInferencer />} />
-                            <Route
-                                path="edit/:id"
-                                element={<AntdInferencer />}
-                            />
-                        </Route>
-                        <Route path="categories">
-                            <Route index element={<AntdInferencer />} />
-                            <Route
-                                path="show/:id"
-                                element={<AntdInferencer />}
-                            />
-                        </Route>
-                        <Route path="*" element={<ErrorComponent />} />
-                    </Route>
-                </Routes>
-            </Refine>
-        </BrowserRouter>
-    );
+  return (
+    <BrowserRouter>
+      <Refine
+        routerProvider={routerProvider}
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        notificationProvider={notificationProvider}
+        resources={[
+          {
+            name: "blog_posts",
+            list: "/blog-posts",
+            show: "/blog-posts/show/:id",
+            create: "/blog-posts/create",
+            edit: "/blog-posts/edit/:id",
+            meta: { canDelete: true },
+          },
+          {
+            name: "categories",
+            list: "/categories",
+            show: "/categories/show/:id",
+          },
+        ]}
+      >
+        <Routes>
+          <Route
+            element={
+              <ThemedLayout>
+                <Outlet />
+              </ThemedLayout>
+            }
+          >
+            <Route index element={<NavigateToResource />} />
+            <Route path="blog-posts">
+              <Route index element={<AntdInferencer />} />
+              <Route path="show/:id" element={<AntdInferencer />} />
+              <Route path="create" element={<AntdInferencer />} />
+              <Route path="edit/:id" element={<AntdInferencer />} />
+            </Route>
+            <Route path="categories">
+              <Route index element={<AntdInferencer />} />
+              <Route path="show/:id" element={<AntdInferencer />} />
+            </Route>
+            <Route path="*" element={<ErrorComponent />} />
+          </Route>
+        </Routes>
+      </Refine>
+    </BrowserRouter>
+  );
 };
 
 export default App;
@@ -244,7 +231,6 @@ export default App;
 
 <br/>
 
-
 🚀 The [**Refine Inferencer package**](https://refine.dev/docs/packages/documentation/inferencer/) automatically generates `list`, `show`, `create`, and `edit` pages by guessing configurations from API data. We've used it here for a quick, clear start, but you can also choose to code your pages from scratch instead of using the Inferencer feature.
 
 Now, you should see the output as a table populated with `blog_posts` & `category` data:
@@ -268,8 +254,6 @@ You can get the auto-generated page codes by clicking the `Show Code` button on
 
 👉 Play with interactive [examples](https://refine.dev/docs/examples/).
 
-
-
 ## Contribution
 
 [👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)

package/dist/components/authenticated/index.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 export declare 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.
@@ -36,6 +42,34 @@ export declare type LegacyAuthenticatedProps = {
 export declare type AuthenticatedProps = {
     v3LegacyAuthProviderCompatible?: false;
 } & AuthenticatedCommonProps;
+/**
+ * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
+ *
+ * @requires {@link https://react.dev/learn/rendering-lists#why-does-react-need-keys `key`} prop if you have multiple components at the same level.
+ * In React, components don't automatically unmount and remount with prop changes, which is generally good for performance. However, for specific cases this can cause issues like unwanted content rendering (`fallback` or `children`). To solve this, assigning unique `key` values to each instance of component is necessary, forcing React to unmount and remount the component, rather than just updating its props.
+ * @example
+ *```tsx
+ * <Authenticated key="dashboard">
+ *   <h1>Dashboard Page</h1>
+ * </Authenticated>
+ *```
+ *
+ * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
+ */
 export declare function Authenticated(props: LegacyAuthenticatedProps): JSX.Element | null;
+/**
+ * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
+ *
+ * @requires {@link https://react.dev/learn/rendering-lists#why-does-react-need-keys `key`} prop if you have multiple components at the same level.
+ * In React, components don't automatically unmount and remount with prop changes, which is generally good for performance. However, for specific cases this can cause issues like unwanted content rendering (`fallback` or `children`). To solve this, assigning unique `key` values to each instance of component is necessary, forcing React to unmount and remount the component, rather than just updating its props.
+ * @example
+ *```tsx
+ * <Authenticated key="dashboard">
+ *   <h1>Dashboard Page</h1>
+ * </Authenticated>
+ *```
+ *
+ * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
+ */
 export declare function Authenticated(props: AuthenticatedProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/authenticated/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/authenticated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyC1B,oBAAY,wBAAwB,GAAG;IACnC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACnC,8BAA8B,EAAE,IAAI,CAAC;CACxC,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,kBAAkB,GAAG;IAC7B,8BAA8B,CAAC,EAAE,KAAK,CAAC;CAC1C,GAAG,wBAAwB,CAAC;AAE7B,wBAAgB,aAAa,CACzB,KAAK,EAAE,wBAAwB,GAChC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEtB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/authenticated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,wBAAwB,GAAG;IACnC;;;;OAIG;IACH,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;IACf;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACnC,8BAA8B,EAAE,IAAI,CAAC;CACxC,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,kBAAkB,GAAG;IAC7B,8BAA8B,CAAC,EAAE,KAAK,CAAC;CAC1C,GAAG,wBAAwB,CAAC;AAE7B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,wBAAwB,GAChC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEtB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC"}

package/dist/components/pages/auth/components/login/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAK3E,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,UAAU,GAAG,cAAc,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AAE5E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwK1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAK3E,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,UAAU,GAAG,cAAc,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AAE5E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkM1C,CAAC"}

package/dist/components/pages/auth/components/register/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/register/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAU9D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,aAAa,GAAG,iBAAiB,CAClC,YAAY,EACZ,YAAY,EACZ,aAAa,CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgJhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/register/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAU9D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,aAAa,GAAG,iBAAiB,CAClC,YAAY,EACZ,YAAY,EACZ,aAAa,CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuKhD,CAAC"}

package/dist/components/pages/welcome/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/welcome/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAoGxC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA6G/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/welcome/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8CxC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA2J/B,CAAC"}