Merge branch 'master' into next

Author: djhi

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 5.8.4
+
+* Replace `Datagrid` by `DataTable` in Guessers ([#10754](https://github.com/marmelab/react-admin/pull/10754)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* Fix `<DataTable>` crashes when its data is not a React primitive ([#10777](https://github.com/marmelab/react-admin/pull/10777)) ([djhi](https://github.com/djhi))
+* Fix(show/edit): Avoid a redirect loop when `useGetOne` returns an error in `shadcn-admin-kit` ([#10776](https://github.com/marmelab/react-admin/pull/10776)) ([jonathanarnault](https://github.com/jonathanarnault))
+* Fix disabled `<BooleanInput>` ([#10773](https://github.com/marmelab/react-admin/pull/10773)) ([Madeorsk](https://github.com/Madeorsk))
+* Fix: avoid an infinite loop when loading the demo apps for the first time ([#10769](https://github.com/marmelab/react-admin/pull/10769)) ([jonathanarnault](https://github.com/jonathanarnault))
+* Fix `<SaveButton>` is not enabled when the form is prefilled (from `<CloneButton>` for instance) ([#10765](https://github.com/marmelab/react-admin/pull/10765)) ([djhi](https://github.com/djhi))
+* [chore] Add spinner while installing dependencies in `create-react-admin` ([#10778](https://github.com/marmelab/react-admin/pull/10778)) ([djhi](https://github.com/djhi))
+* [Doc] Rename `convertRaMessagesToI18next` to `convertRaTranslationsToI18next` ([#10774](https://github.com/marmelab/react-admin/pull/10774)) ([Madeorsk](https://github.com/Madeorsk))
+* [Doc] Fix videos in `<DataTable>` docs ([#10775](https://github.com/marmelab/react-admin/pull/10775)) ([Madeorsk](https://github.com/Madeorsk))
+
 ## 5.8.3
 
 * Fix potential prototype-polluting assignment in `ra-data-local-storage` ([#10758](https://github.com/marmelab/react-admin/pull/10758)) ([fzaninotto](https://github.com/fzaninotto))

docs/Architecture.md

@@ -219,9 +219,9 @@ Although this drawback exists, we accept it because the use of composition in re
 
 ## Hooks
 
-When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, react-admin is built on top of a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
+When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, the core of react-admin is a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
 
-For example, the `<DeleteWithConfirmButton>` button renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
+For example, the `<DeleteButton>` button used in `pessimistic` mode renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
 
 {% raw %}
 ```jsx
@@ -269,7 +269,7 @@ The fact that hook names often end with `Controller` is intentional and reflects
 - The view logic is managed by React components (e.g. `<List>`).
 - The model logic is left to the developer, and react-admin simply defines the interface that the model must expose through its Providers.
 
-React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired. This flexibility allows you to tailor the application to your specific needs and preferences.
+React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired (see for instance [shadcn-admin-kit](https://github.com/marmelab/shadcn-admin-kit), a library for building admin apps with Shadcn UI). This flexibility allows you to tailor the application to your specific needs and preferences.
 
 ## Context: Pull, Don't Push
 

docs/DataTable.md

@@ -203,7 +203,7 @@ React-admin provides four bulk action buttons that you can use in data tables:
 **Tip**: Users can select a range of rows by pressing the shift key while clicking a row checkbox.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/Datagrid-select-range.mp4" type="video/mp4"/>
+  <source src="./img/datagrid-select-range.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 
@@ -525,7 +525,7 @@ const BookList = () => (
 ## `expand`
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/Datagrid_expand.mp4" type="video/mp4"/>
+  <source src="./img/datagrid_expand.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 
@@ -1269,7 +1269,7 @@ Refer to the [`<NumberField>`](./NumberField.md) documentation for more details.
 `<DataTable>` has sticky headers, which means that the header row will remain visible even when scrolling down the page.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/Datagrid-headers-pinning.mp4" type="video/mp4"/>
+  <source src="./img/datagrid-headers-pinning.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/Features.md

@@ -273,11 +273,43 @@ And for mobile users, react-admin renders a different layout with larger margins
 
 ## Headless Core
 
-React-admin components use Material UI components by default, which lets you scaffold a page in no time. As material UI supports [theming](#theming), you can easily customize the look and feel of your app. But in some cases, this is not enough, and you need to use another UI library.
+React-admin components use Material UI components by default, which lets you scaffold a page in no time. As Material UI supports [theming](#theming), you can easily customize the look and feel of your app. But in some cases, this is not enough, and you need to use another UI library.
 
 You can change the UI library you use with react-admin to use [Ant Design](https://ant.design/), [Daisy UI](https://daisyui.com/), [Chakra UI](https://chakra-ui.com/), or even you own custom UI library. The **headless logic** behind react-admin components is agnostic of the UI library, and is exposed via `...Base` components and controller hooks.
 
-For instance, here a List view built with [Ant Design](https://ant.design/):
+For instance, [`shadcn-admin-kit`](https://github.com/marmelab/shadcn-admin-kit) is a react-admin distribution that replaces Material UI with [Shadcn UI](https://ui.shadcn.com/).
+
+[![Shadcn admin kit](https://github.com/marmelab/shadcn-admin-kit/raw/main/public/shadcn-admin-kit.webp)](https://github.com/marmelab/shadcn-admin-kit)
+
+`shadcn-admin-kit` follows the same syntax conventions as react-admin, so most of the react-admin documentation still applies. For example, the `<ProductEdit>` component looks like this:
+
+```tsx
+import {
+  AutocompleteInput,
+  Edit,
+  ReferenceInput,
+  SimpleForm,
+  TextInput,
+} from "@/components/admin";
+import { required } from "ra-core";
+
+export const ProductEdit = () => (
+  <Edit>
+    <SimpleForm>
+      <TextInput source="reference" label="Reference" validate={required()} />
+      <ReferenceInput source="category_id" reference="categories">
+        <AutocompleteInput label="Category" validate={required()} />
+      </ReferenceInput>
+      <TextInput source="width" type="number" />
+      <TextInput source="height" type="number" />
+      <TextInput source="price" type="number" />
+      <TextInput source="stock" label="Stock" type="number" />
+    </SimpleForm>
+  </Edit>
+);
+```
+
+Here is another example: a List view built with [Ant Design](https://ant.design/):
 
 ![List view built with Ant Design](./img/list_ant_design.png)
 
@@ -360,10 +392,7 @@ Check the following hooks to learn more about headless controllers:
 - [`useCreateController`](./useCreateController.md)
 - [`useShowController`](./useShowController.md)
 
-And check these examples for admin panels built with react-admin but without Material UI:
-
-- [DaisyUI, Tailwind CSS, Tanstack Table and React-Aria](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html)
-- [shadcn/ui, Tailwind CSS and Radix UI](https://github.com/marmelab/ra-shadcn-demo)
+And for a more in-depth tutorial about using react-admin with your favorite UI library, check the following article: [Building an admin with DaisyUI, Tailwind CSS, Tanstack Table and React-Aria](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html).
 
 ## Guessers & Scaffolding