@refinedev/core 4.48.0 → 4.49.1

package/CHANGELOG.md

@@ -1,5 +1,158 @@
 # @refinedev/core
 
+## 4.49.1
+
+### Patch Changes
+
+- [#5875](https://github.com/refinedev/refine/pull/5875) [`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf) Thanks [@aliemir](https://github.com/aliemir)! - refactor: add resource name to devtools xray calls
+
+  Added the resource name to the devtools xray calls to allow resource names to be displayed in the devtools even with custom query keys.
+
+- [#5883](https://github.com/refinedev/refine/pull/5883) [`0a76576da0f`](https://github.com/refinedev/refine/commit/0a76576da0f18c6db372e737c610ad462b56ff21) Thanks [@aliemir](https://github.com/aliemir)! - fix: development errors being logged when `useOnError` is called without an auth provider
+
+  When there's no `authProvider` set, the `useOnError` hook will log `"no mutationFn found"` to the console in development because of missing `onError` property. This PR fixes the issue by providing a dummy `onError` function when `authProvider` is not set.
+
+- [#5851](https://github.com/refinedev/refine/pull/5851) [`8d2dd4376f6`](https://github.com/refinedev/refine/commit/8d2dd4376f672786d4722d3dee09e6344f1002e4) Thanks [@aliemir](https://github.com/aliemir)! - refactor: prevented early accessing `signal` from `useQuery` of `@tanstack/react-query`
+
+  In query hooks, `signal` was accessed directly by destructuring which was causing issues in development mode with duplicated requests. This change accesses `queryContext` instead of destructured `signal` properly to prevent `@tanstack/react-query` from setting `abortSignalConsumed` flag unexpectedly.
+
+  Resolves [#5843](https://github.com/refinedev/refine/issues/5843)
+
+- [#5875](https://github.com/refinedev/refine/pull/5875) [`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf) Thanks [@aliemir](https://github.com/aliemir)! - fix: exclude internal button hook calls from devtools trace
+
+  Removed internal button hook calls from devtools trace to avoid crowding the trace with unnecessary information.
+
+- [#5881](https://github.com/refinedev/refine/pull/5881) [`ba719f6ea26`](https://github.com/refinedev/refine/commit/ba719f6ea264ee87226f42de900a754e81f1f22f) Thanks [@aliemir](https://github.com/aliemir)! - fix: declaration files in node10, node16 and nodenext module resolutions
+
+- [#5884](https://github.com/refinedev/refine/pull/5884) [`9a0c1c8414a`](https://github.com/refinedev/refine/commit/9a0c1c8414a7b228378c234468396e6288cdb6f0) Thanks [@aliemir](https://github.com/aliemir)! - fix(core): `useMenu` `hideOnMissingParameter` prop default value set to `true`
+
+  There was an error in the `useMenu` hook's `hideOnMissingParameter` prop. Its default value should be `true` but it was missed when props are passed partially. This PR fixes the issue by setting the default value to `true`.
+
+- Updated dependencies [[`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf), [`1c9a95f22ab`](https://github.com/refinedev/refine/commit/1c9a95f22ab8c3f1d1e48c7c889227ce1d9160cf), [`ba719f6ea26`](https://github.com/refinedev/refine/commit/ba719f6ea264ee87226f42de900a754e81f1f22f)]:
+  - @refinedev/devtools-internal@1.1.8
+
+## 4.49.0
+
+### Minor Changes
+
+- [#5751](https://github.com/refinedev/refine/pull/5751) [`f32512b9042`](https://github.com/refinedev/refine/commit/f32512b90427cbb97b28e9d5445dcd343067aa7e) Thanks [@aliemir](https://github.com/aliemir)! - Added `useResourceParams` hook. This hook initially works similarly to `useResource` but it correctly handles the `id` and `action` params per active route and explicit parameters. In `@refinedev/core` and other Refine packages there was a common logic of handling the `id` since its inference is dependent on the active resource and route. The same also applies to the `action` parameter of forms. This hook handles these cases and provides a more consistent API to share the same logic without duplicating it.
+
+  - `id` and `action` values returned from `useResource` is deprecated in favor of `useResourceParams`.
+  - `useForm` hook is updated to use `useResourceParams` under the hood.
+  - `useShow` hook is updated to use `useResourceParams` under the hood.
+  - `<CanAccess />` component is updated to use `useResourceParams` under the hood.
+
+### Patch Changes
+
+- [#5737](https://github.com/refinedev/refine/pull/5737) [`4e8188a6652`](https://github.com/refinedev/refine/commit/4e8188a665209b0d0b77aef27c795a29b9513226) Thanks [@aliemir](https://github.com/aliemir)! - chore: updated content of `README.md` to include installation, usage and scaffolding instructions.
+
+- [#5808](https://github.com/refinedev/refine/pull/5808) [`10ba9c34490`](https://github.com/refinedev/refine/commit/10ba9c344900d0fa4af7120c24b3b007081a4c39) Thanks [@aliemir](https://github.com/aliemir)! - chore: improved `useMutationMode` hooks usage by accepting explicit values to be passed for `mutationMode` and `undoableTimeout`, handling the precedence of the values inside the hook rather than outside to avoid repetition
+
+- [#5733](https://github.com/refinedev/refine/pull/5733) [`2b5ac6f5409`](https://github.com/refinedev/refine/commit/2b5ac6f5409b7b175c453793224a531e644f6513) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - feat: added `useTranslation` hook. It combines `useTranslate`, `useSetLocale` and `useGetLocale` hooks and returns `translate`, `changeLocale` and `getLocale` methods from that hooks for better developer experience.
+
+  It returns all [`i18nProvider`](/docs/i18n/i18n-provider) methods in one hook. It can be used to translate texts, change the locale, and get the current locale in your own components.
+
+  ```tsx
+  import { useTranslation } from "@refinedev/core";
+
+  export const MyComponent = () => {
+    const { translate, getLocale, changeLocale } = useTranslation();
+    const currentLocale = getLocale();
+
+    return (
+      <div>
+        <h1>{translate("languages")}</h1>
+        <button
+          onClick={() => changeLocale("en")}
+          disabled={currentLocale === "en"}
+        >
+          English
+        </button>
+        <button
+          onClick={() => changeLocale("de")}
+          disabled={currentLocale === "de"}
+        >
+          German
+        </button>
+      </div>
+    );
+  };
+  ```
+
+  Example of combining `useTranslation` with `useTranslate`, `useSetLocale` and `useGetLocale` hooks.
+
+  ```diff
+  import {
+  -  useGetLocale,
+  -  useSetLocale,
+  -  useTranslate,
+  +  useTranslation,
+  } from "@refinedev/core";
+
+  export const MyComponent = () => {
+  -  const changeLocale = useSetLocale();
+  -  const getLocale = useGetLocale();
+  -  const translate = useTranslate();
+
+  +  const { translate, getLocale, changeLocale } = useTranslation();
+
+    return <div>{/* ... */}</div>;
+  };
+  ```
+
+- [#5765](https://github.com/refinedev/refine/pull/5765) [`0c197d82393`](https://github.com/refinedev/refine/commit/0c197d823939ae1fd4e0ee4b5a422322853b1e45) Thanks [@aliemir](https://github.com/aliemir)! - refactor: package bundles and package.json configuration for exports
+
+  Previously, Refine packages had exported ESM and CJS bundles with same `.js` extension and same types for both with `.d.ts` extensions. This was causing issues with bundlers and compilers to pick up the wrong files for the wrong environment. Now we're outputting ESM bundles with `.mjs` extension and CJS bundles with `.cjs` extension. Also types are now exported with both `.d.mts` and `.d.cts` extensions.
+
+  In older versions ESM and CJS outputs of some packages were using wrong imports/requires to dependencies causing errors in some environments. This will be fixed since now we're also enforcing the module type with extensions.
+
+  Above mentioned changes also supported with changes in `package.json` files of the packages to support the new extensions and types. All Refine packages now include `exports` fields in their configuration to make sure the correct bundle is picked up by the bundlers and compilers.
+
+- [#5765](https://github.com/refinedev/refine/pull/5765) [`0c197d82393`](https://github.com/refinedev/refine/commit/0c197d823939ae1fd4e0ee4b5a422322853b1e45) Thanks [@aliemir](https://github.com/aliemir)! - Fixed the `lodash-es` imports for ESM builds to access the exports properly.
+
+- [#5755](https://github.com/refinedev/refine/pull/5755) [`404b2ef5e1b`](https://github.com/refinedev/refine/commit/404b2ef5e1b8fed469eeab753bac8736ed3fe58e) Thanks [@BatuhanW](https://github.com/BatuhanW)! - feat: refactor TS typings.
+
+  Type definitions in `src/interfaces` folder moved to their main consumer's folder under `types.ts` files.
+
+- [#5754](https://github.com/refinedev/refine/pull/5754) [`56ed144a0f5`](https://github.com/refinedev/refine/commit/56ed144a0f5af218fd9e6edbfd999ae433329927) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - chore: TypeScript upgraded to [v5.x.x](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html). #5752
+
+- [#5765](https://github.com/refinedev/refine/pull/5765) [`0c197d82393`](https://github.com/refinedev/refine/commit/0c197d823939ae1fd4e0ee4b5a422322853b1e45) Thanks [@aliemir](https://github.com/aliemir)! - Update `papaparse` imports to fix ESM exports to work properly
+
+- [#5808](https://github.com/refinedev/refine/pull/5808) [`10ba9c34490`](https://github.com/refinedev/refine/commit/10ba9c344900d0fa4af7120c24b3b007081a4c39) Thanks [@aliemir](https://github.com/aliemir)! - feat: added headless button hooks
+
+  We've added a new set of hooks to make it easier to create and manage UI buttons of Refine. There's a hook for each type of button which previously had duplicated logic across the codebase between UI integrations of Refine. Now all these buttons will be powered by the same hooks maintained in the `@refinedev/core` package to ensure consistency and reduce duplication.
+
+  New Hooks:
+
+  - `useListButton`: A navigation button that navigates to the list page of a resource.
+  - `useCreateButton`: A navigation button that navigates to the create page of a resource.
+  - `useShowButton`: A navigation button that navigates to the show page of a record.
+  - `useEditButton`: A navigation button that navigates to the edit page of a record.
+  - `useCloneButton`: A navigation button that navigates to the clone page of a record.
+  - `useRefreshButton`: A button that triggers an invalidation of the cache of a record.
+  - `useDeleteButton`: A button that triggers a delete mutation on a record.
+  - `useSaveButton`: A button to be used inside a form to trigger a save mutation.
+  - `useExportButton`: A button to be used with `useExport` to trigger an export bulk data of a resource.
+  - `useImportButton`: A button to be used with `useImport` to trigger an import bulk data for a resource.
+
+- [#5714](https://github.com/refinedev/refine/pull/5714) [`38f129f40ee`](https://github.com/refinedev/refine/commit/38f129f40eea109c9b89b23a8fd3f217964330c7) Thanks [@aliemir](https://github.com/aliemir)! - Refactored the internal logic of `useForm` to be more efficient and readable, along with few bug fixes and improvements to the `useForm` hook.
+
+  These changes are related to the issue [#5702](https://github.com/refinedev/refine/issues/5702) and resolves [#5460](https://github.com/refinedev/refine/issues/5460).
+
+  - `onFinish` now rejects when; - `values` is not provided, - `resource` is not defined, - `id` is required but not provided.
+    previously these cases were silently ignored.
+  - Same changes also applies to `onFinishAutoSave`.
+  - `onFinishAutoSave` had an issue with returning the appropriate promise after being called. This resulted in unhandled promise rejections and uncontrollable resolved promises. Now it is fixed, `onFinishAutoSave` will resolve and reject based on the response of the mutation.
+  - When using auto save, debounced calls will now be cancelled and the respective promises will be rejected with `"cancelled by debounce"` message. These changes might require an update to the code bases that uses `onFinishAutoSave` to handle the rejection of the promise to avoid unhandled promise rejections.
+  - Combined the separated submit functions into one for sake of simplicity and consistency. (internal)
+  - `onFinish` rejects and resolved regardless of the `onMutationSuccess` and `onMutationError` hooks are provided or not. (Resolves [#5460](https://github.com/refinedev/refine/issues/5460))
+  - `meta` values were concatenated multiple times causing confusion and unexpected behavior, now it is fixed. (internal)
+  - Moved the `id` determination/inference logic to a separate hook. (internal)
+  -
+
+- Updated dependencies [[`0c197d82393`](https://github.com/refinedev/refine/commit/0c197d823939ae1fd4e0ee4b5a422322853b1e45), [`56ed144a0f5`](https://github.com/refinedev/refine/commit/56ed144a0f5af218fd9e6edbfd999ae433329927)]:
+  - @refinedev/devtools-internal@1.1.7
+
 ## 4.48.0
 
 ### Minor Changes

package/README.md

@@ -8,18 +8,17 @@
 
 <div align="center">
     <a href="https://refine.dev">Home Page</a> |
-    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/docs/">Documentation</a> |
     <a href="https://refine.dev/examples/">Examples</a> |
-    <a href="https://refine.dev/blog/">Blog</a> |
-    <a href="https://refine.dev/docs/">Documentation</a>
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/blog/">Blog</a>
 </div>
 </div>
 
 <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.
-
+<div align="center"><strong>The sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.</strong><br> Refine is as an open source, React meta-framework for enterprise. It provides a headless solution for everything from admin panels to dashboards and internal tools.
 <br />
 <br />
 
@@ -28,239 +27,189 @@
 <div align="center">
 
 [![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8101/badge)](https://www.bestpractices.dev/projects/8101)
 [![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)
-[![](https://img.shields.io/github/commit-activity/m/refinedev/refine)](https://github.com/refinedev/refine/commits/master)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)
 
 [![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>
 
 <br/>
 
-[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/new-diagram.jpg)](https://refine.dev)
+[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png)](https://refine.dev)
 
 ## What is Refine?
 
-**Refine** is a meta **React** framework that enables the rapid✨ development of a wide range of web applications.
-
-From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
-
-Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
-
-**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
-
-## What do you mean by "headless" ?
-
-Instead of being limited to a set of pre-styled components, **Refine** provides collections of helper `hooks`, `components`, `providers`, and more. Since business logic and the UI are completely decoupled, you can customize the UI without constraints.
-
-It means that **Refine** just works _seamlessly_ with any _custom designs_ or _UI frameworks_. Thanks to it's headless architecture, you can use popular CSS frameworks like [TailwindCSS](https://tailwindcss.com/) or even create your own styles from scratch.
+**Refine** is a React meta-framework for CRUD-heavy web applications. It addresses a wide range of enterprise use cases including internal tools, admin panels, dashboards and B2B apps.
 
-Refine also provides integrations with [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) to get you started quickly. These libraries are a set of components that are nicely integrated with the headless `@refinedev/core` package.
+Refine's core hooks and components streamline the development process by offering industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
 
-### Headless in Routing
+Refine's headless architecture enables the building of highly customizable applications by decoupling business logic from UI and routing. This allows integration with:
 
-For the routing, Refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.
+- Any custom designs or UI frameworks like [TailwindCSS](https://tailwindcss.com/), along with built-in support for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/).
 
-This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
+- Various platforms, including Next.js, Remix, React Native, Electron, etc., by a simple routing interface without the need for additional setup steps.
 
 ## ⚡ 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.
+Start a new project with Refine in seconds using the following command:
 
-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.
+```sh
+npm create refine-app@latest my-refine-app
+```
 
-<br/>
+Or you can create a new project on your browser:
 
-<div align="center">
-<a href="https://refine.dev/#playground" target="_blank">
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/create-refine-project.gif"    />
+<a href="https://refine.dev/?playground=true" target="_blank">
+  <img height="48" width="245" src="https://refine.ams3.cdn.digitaloceanspaces.com/assets/try-it-in-your-browser.png" />
 </a>
-</div>
-
-## Use cases
-
-**Refine** shines on _data-intensive⚡_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, it can also power _customer-facing_ applications like **storefronts**.
-
-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)
-
-[👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
-
-[👉 More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
-
-## Key Features
-
-⚙️ Zero-config, **one-minute setup** with a **single CLI command**
-
-🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
-
-🌐 **SSR support** with **Next.js** or **Remix**
-
-🔍 Auto-generated **CRUD** UIs from **your API data structure**
-
-⚛ Perfect **state management** & **mutations** with **React Query**
-
-🔀 **Advanced routing** with any router library of your choice
-
-🔐 Providers for seamless **authentication** and **access control** flows
-
-⚡ Out-of-the-box support for **live / real-time applications**
-
-📄 Easy **audit logs** & **document versioning**
-
-💬 Support for any **i18n** framework
-
-💪 Future-proof, **robust architecture**
-
-⌛️ Built-in CLI with time-saving features
-
-💻 Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
-
-✅ Full **test coverage**
 
 ## Quick Start
 
-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).
+Here's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Material UI:
 
-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
-```
-
-Once the setup is complete, navigate to the project folder and start your project with:
-
-```
-npm run dev
-```
-
-<br/>
-
-Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
-
-<a href="http://localhost:5173">![Welcome on board](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/welcome.png)</a>
-
-<br/>
-
-> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
->
-> ```
-> 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 {
-  useNotificationProvider,
-  ErrorComponent,
-  ThemedLayout,
-} from "@refinedev/antd";
-import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
+```tsx
+import React from "react";
+import { Refine, useMany } from "@refinedev/core";
+import { ThemedLayoutV2 } from "@refinedev/mui";
 import dataProvider from "@refinedev/simple-rest";
+import routerProvider from "@refinedev/react-router-v6";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 
-import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
-
-import { AntdInferencer } from "@refinedev/inferencer/antd";
+import CssBaseline from "@mui/material/CssBaseline";
 
-import "@refinedev/antd/dist/reset.css";
-
-const App: React.FC = () => {
+export default function App() {
   return (
     <BrowserRouter>
+      <CssBaseline />
       <Refine
-        routerProvider={routerProvider}
         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-        notificationProvider={useNotificationProvider}
+        routerProvider={routerProvider}
         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",
+            name: "products",
+            list: "/products",
           },
         ]}
       >
         <Routes>
           <Route
             element={
-              <ThemedLayout>
+              <ThemedLayoutV2>
                 <Outlet />
-              </ThemedLayout>
+              </ThemedLayoutV2>
             }
           >
-            <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 path="/products">
+              <Route index element={<ProductList />} />
             </Route>
-            <Route path="*" element={<ErrorComponent />} />
           </Route>
         </Routes>
       </Refine>
     </BrowserRouter>
   );
-};
+}
+
+// src/pages/products/list.tsx
+
+import { List, useDataGrid, DateField } from "@refinedev/mui";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+
+export const ProductList = () => {
+  const { dataGridProps } = useDataGrid();
+
+  const { data: categories, isLoading } = useMany({
+    resource: "categories",
+    ids:
+      dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ??
+      [],
+    queryOptions: {
+      enabled: !!dataGridProps?.rows,
+    },
+  });
+
+  const columns = React.useMemo<GridColDef[]>(
+    () => [
+      { field: "id", headerName: "ID", type: "number" },
+      { field: "name", flex: 1, headerName: "Name" },
+      {
+        field: "category",
+        flex: 1,
+        headerName: "Category",
+        renderCell: ({ value }) =>
+          isLoading
+            ? "Loading..."
+            : categories?.data?.find((item) => item.id === value?.id)?.title,
+      },
+      {
+        field: "createdAt",
+        flex: 1,
+        headerName: "Created at",
+        renderCell: ({ value }) => <DateField value={value} />,
+      },
+    ],
+    [categories?.data, isLoading],
+  );
 
-export default App;
+  return (
+    <List>
+      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+    </List>
+  );
+};
 ```
 
-<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.
+The result will look like this:
 
-Now, you should see the output as a table populated with `blog_posts` & `category` data:
+[![Refine + Material UI Example](https://refine.ams3.cdn.digitaloceanspaces.com/assets/refine-mui-simple-example-screenshot-rounded.webp)](https://refine.new/preview/c85442a8-8df1-4101-a09a-47d3ca641798)
 
-![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start-2.png)
-
-<br/>
+## Use cases
 
-You can get the auto-generated page codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing them with the Inferencer components.
+**Refine** shines on _data-intensive⚡_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, it can also power _customer-facing_ applications like **storefronts**.
 
-## Next Steps
+You can take a look at some live examples that can be built using **Refine** from scratch:
 
-👉 Jump to [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) to continue your work and turn the example into a full-blown CRUD application.
+- [Fully-functional CRM Application](https://refine.dev/templates/crm-application/)
+- [Fully-functional Admin Panel](https://refine.dev/templates/react-admin-panel/)
+- [Win95 Style Admin panel 🪟](https://refine.dev/templates/win-95-style-admin-panel/)
+- [Medium Clone - Real World Example](https://refine.dev/templates/react-crud-app/)
+- [Multitenancy Example](https://refine.dev/templates/multitenancy-strapi/)
+- [Storefront](https://refine.dev/templates/next-js-ecommerce-store/)
+- [Refer to templates page for more examples](https://refine.dev/templates/)
+- [More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
 
-👉 Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
+## Key Features
 
-👉 Read more on [Advanced Tutorials
-](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
+- Refine Devtools - dive deeper into your app and provide useful insights
+- Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
+- SSR support with Next.js & Remix and Advanced routing with any router library of your choice
+- Auto-generation of CRUD UIs based on your API data structure
+- Perfect state management & mutations with React Query
+- Providers for seamless authentication and access control flows
+- Out-of-the-box support for live / real-time applications
+- Easy audit logs & document versioning
 
-👉 See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
+## Learning Refine
 
-👉 Play with interactive [examples](https://refine.dev/docs/examples/).
+- Navigate to the [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) on building comprehensive CRUD application guides you through each step of the process.
+- Visit the [Guides & Concepts](https://refine.dev/docs/guides-concepts/general-concepts/) to get informed about the fundamental concepts.
+- Read more on [Advanced Tutorials](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
 
 ## Contribution
 
-[👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
+[Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
 
 If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
 
-## Contributors ♥️
+## Contributors ♥️ Thanks
+
+We extend our gratitude to all our numerous contributors who create plugins, assist with issues and pull requests, and respond to questions on Discord and GitHub Discussions.
+
+Refine is a community-driven project, and your contributions continually improve it.
+
+<br/>
 
 <a href="https://github.com/refinedev/refine/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" />

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

@@ -0,0 +1,75 @@
+import React from "react";
+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;
+};
+export type LegacyAuthenticatedProps = {
+    v3LegacyAuthProviderCompatible: true;
+} & AuthenticatedCommonProps;
+export 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.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/authenticated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;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;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,8BAA8B,EAAE,IAAI,CAAC;CACtC,GAAG,wBAAwB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8BAA8B,CAAC,EAAE,KAAK,CAAC;CACxC,GAAG,wBAAwB,CAAC;AAE7B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,wBAAwB,GAC9B,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEtB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC"}