Merge branch 'master' into next

marmelab · Nov 29, 2022 · 989a9cc · 989a9cc
2 parents 8c1c27b + 59c2240
commit 989a9cc
Show file tree

Hide file tree

Showing 43 changed files with 403 additions and 388 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md
@@ -374,8 +374,6 @@ When dealing with a large amount of `choices` you may need to limit the number o
 />
 ```
 
-This prop is passed to the underlying `react-autosuggest` component and is documented [in their respository](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
-
 ## `suggestionLimit`
 
 The `choices` prop can be very large, and rendering all of them would be very slow. To limit the number of suggestions displayed at any time, set the `suggestionLimit` prop:

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
@@ -366,8 +366,6 @@ When dealing with a large amount of `choices` you may need to limit the number o
 />
 ```
 
-This prop is passed to the underlying `react-autosuggest` component and is documented [in their respository](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
-
 ## `suggestionLimit`
 
 The `choices` prop can be very large, and rendering all of them would be very slow. To limit the number of suggestions displayed at any time, set the `suggestionLimit` prop:

diff --git a/docs/DataProviderList.md b/docs/DataProviderList.md
@@ -9,6 +9,7 @@ Thanks to the Data Provider architecture, react-admin supports a lot of API back
 
 If you can't find a Data Provider for your backend below, no worries! [Writing a Data Provider](./DataProviderWriting.md) takes a couple of hours, and won't prevent you from using react-admin.
 
+* **[AppWrite](https://appwrite.io/)**: [g33kdev/ra-appwrite](https://github.com/g33kdev/ra-appwrite)
 * **[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)
 * **[Blitz-js](https://blitzjs.com/docs)**: [theapexlab/ra-data-blitz](https://github.com/theapexlab/ra-data-blitz)
 * **[Configurable Identity Property REST Client](https://github.com/zachrybaker/ra-data-rest-client)**: [zachrybaker/ra-data-rest-client](https://github.com/zachrybaker/ra-data-rest-client)

diff --git a/docs/Datagrid.md b/docs/Datagrid.md
@@ -809,13 +809,19 @@ import {
     DatagridConfigurable,
     List,
     SelectColumnsButton,
+    FilterButton,
+    CreateButton,
+    ExportButton,
     TextField,
     TopToolbar,
 } from "react-admin";
 
 const PostListActions = () => (
     <TopToolbar>
         <SelectColumnsButton />
+        <FilterButton />
+        <CreateButton />
+        <ExportButton />
     </TopToolbar>
 );
 

diff --git a/docs/FilterList.md b/docs/FilterList.md
@@ -28,7 +28,7 @@ export const PostFilterSidebar = () => (
     <Card sx={{ order: -1, mr: 2, mt: 9, width: 200 }}>
         <CardContent>
             <SavedQueriesList />
-            <FilterLiveSearch >
+            <FilterLiveSearch />
             <FilterList label="Subscribed to newsletter" icon={<MailIcon />}>
                 <FilterListItem label="Yes" value={{ has_newsletter: true }} />
                 <FilterListItem label="No" value={{ has_newsletter: false }} />
@@ -45,7 +45,7 @@ export const PostFilterSidebar = () => (
 ```
 {% endraw %}
 
-Add this component to the list view using [the `<List aside>` prop](./List.md#aside):
+Add this component to the list view using [the `<List aside>` prop](./List.md#aside-side-component):
 
 ```jsx
 import { PostFilterSidebar } from './PostFilterSidebar';

diff --git a/docs/NextJs.md b/docs/NextJs.md
@@ -29,7 +29,7 @@ Add the `react-admin` npm package, as well as a data provider package. In this e
 yarn add react-admin ra-data-json-server
 ```
 
-Next, create the admin app component in `src/Admin/App.jsx`:
+Next, create the admin app component in `src/admin/App.jsx`:
 
 ```jsx
 // in src/admin/App.jsx

diff --git a/docs/SimpleFormIterator.md b/docs/SimpleFormIterator.md
@@ -151,20 +151,17 @@ const PostEdit = () => (
 **Note**: `<SimpleFormIterator>` only accepts `Input` components as children. If you want to use some `Fields` instead, you have to use a `<FormDataConsumer>` to get the correct source, as follows:
 
 ```jsx
-import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';
+import { ArrayInput, SimpleFormIterator, DateInput, TextField, FormDataConsumer, Labeled } from 'react-admin';
 
 <ArrayInput source="backlinks">
-    <SimpleFormIterator disableRemove >
+    <SimpleFormIterator disableRemove>
         <DateInput source="date" />
         <FormDataConsumer>
-            {({ getSource, scopedFormData }) => {
-                return (
-                    <TextField
-                        source={getSource('url')}
-                        record={scopedFormData}
-                    />
-                );
-            }}
+            {({ getSource }) => (
+                <Labeled label="Url">
+                    <TextField source={getSource('url')} />
+                </Labeled>
+            )}
         </FormDataConsumer>
     </SimpleFormIterator>
 </ArrayInput>
@@ -364,4 +361,4 @@ This property accepts the following subclasses:
 | `RaSimpleFormIterator-index`          | Applied to the row label when `getItemLabel` is set |
 | `RaSimpleFormIterator-inline`         | Applied to rows when `inline` is true |
 | `RaSimpleFormIterator-line`           | Applied to each row |
-| `RaSimpleFormIterator-list`           | Applied to the `<ul>` element |
+| `RaSimpleFormIterator-list`           | Applied to the `<ul>` element |
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
@@ -80,25 +80,40 @@ const App = () => <Admin dataProvider={dataProvider} />;
 export default App;
 ```
 
-Also, remove the default Vite CSS fom the `main.tsx` file:
+That's enough for react-admin to render an empty app and confirm that the setup is done: 
 
-```diff
-// in src/main.tsx
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
--import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
+
+Also, you should change the default Vite CSS file to look like this:
+
+```css
+// in src/index.css
+body {
+    margin: 0;
+}
 ```
 
-That's enough for react-admin to render an empty app and confirm that the setup is done: 
+Lastly, add the `Roboto` font to the `index.html` file:
 
-[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
+```diff
+// in ./index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Admin</title>
++   <link
++     rel="stylesheet"
++     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
++   />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
+```
 
 The `<App>` component renders an `<Admin>` component, which is the root component of a react-admin application. This component expects a `dataProvider` prop - a function capable of fetching data from an API. Since there is no standard for data exchanges between computers, you will probably have to write a custom provider to connect react-admin to your own APIs - but we'll dive into Data Providers later. For now, let's take advantage of the `ra-data-json-server` data provider, which speaks the same REST dialect as JSONPlaceholder.
 

diff --git a/docs/Vite.md b/docs/Vite.md
@@ -61,19 +61,35 @@ const App = () => <MyAdmin />;
 export default App;
 ```
 
-Finally, remove the `index.css` from the `main.tsx` folder:
+Then, change the `index.css` file to look like this:
+
+```css
+/* in src/index.css */
+body {
+    margin: 0;
+}
+```
+
+Finally, add the `Roboto` font to your `index.html` file:
 
 ```diff
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
--import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+// in ./index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Admin</title>
++   <link
++     rel="stylesheet"
++     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
++   />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
 ```
 
 Now, start the server with `yarn dev`, browse to `http://localhost:5173/`, and you should see the working admin:

diff --git a/docs/useList.md b/docs/useList.md
@@ -70,6 +70,7 @@ The `useGetList` parameter accepts the following options:
 * [`page`](#page)
 * [`perPage`](#perpage)
 * [`sort`](#sort)
+* [`filterCallback`](#filtercallback)
 
 ## `filter`
 
@@ -242,9 +243,10 @@ const {
     refetch, // a function that throws an error, as refetch doesn't make sense for local data
 } = getGetList({ data });
 ```
+
 ## `filterCallback`
 
-Property for custom filter definition. Being able to apply more complex filters using operators
+Property for custom filter definition. Lets you apply local filters to the fetched data.
 
 ```jsx
 const { data } = useList({
@@ -259,4 +261,5 @@ const { data } = useList({
 // data will be
 // [
 //    { id: 2, name: 'Sylvester' }, 
-// ]
+// ]
+```
diff --git a/docs/useNotify.md b/docs/useNotify.md
@@ -22,7 +22,7 @@ const NotifyButton = () => {
 The callback takes 2 arguments:
 - The message to display
 - an `options` object with the following keys:
-    - `type`: The notification type (`info`, `success` or `warning` - the default is `info`)
+    - `type`: The notification type (`info`, `success`, `error` or `warning` - the default is `info`)
     - `messageArgs`: options to pass to the `translate` function (because notification messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation.
     - `undoable`: Set it to `true` if the notification should contain an "undo" button
     - `autoHideDuration`: Duration (in milliseconds) after which the notification hides. Set it to `0` if the notification should not be dismissible.
@@ -85,4 +85,4 @@ const LogoutButton = () => {
 };
 ```
 
-To change the default delay for all notifications, check [the Theming documentation](./Theming.md#notifications).
+To change the default delay for all notifications, check [the Theming documentation](./Theming.md#notifications).
diff --git a/examples/data-generator/package.json b/examples/data-generator/package.json
@@ -1,6 +1,6 @@
 {
     "name": "data-generator-retail",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "homepage": "https://github.com/marmelab/react-admin/tree/master/examples/data-generator",
     "bugs": "https://github.com/marmelab/react-admin/issues",
     "license": "MIT",
@@ -19,7 +19,7 @@
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
-        "ra-core": "^4.5.0",
+        "ra-core": "^4.5.2",
         "rimraf": "^3.0.2",
         "typescript": "^4.4.0"
     },

diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,6 +1,6 @@
 {
     "name": "simple",
-    "version": "4.5.1",
+    "version": "4.5.4",
     "private": true,
     "scripts": {
         "dev": "webpack-dev-server --progress --color --hot --mode development",
@@ -18,13 +18,13 @@
         "lodash": "~4.17.5",
         "prop-types": "^15.7.2",
         "proxy-polyfill": "^0.3.0",
-        "ra-data-fakerest": "^4.5.0",
-        "ra-i18n-polyglot": "^4.5.0",
-        "ra-input-rich-text": "^4.5.1",
-        "ra-language-english": "^4.5.0",
-        "ra-language-french": "^4.5.1",
+        "ra-data-fakerest": "^4.5.2",
+        "ra-i18n-polyglot": "^4.5.2",
+        "ra-input-rich-text": "^4.5.4",
+        "ra-language-english": "^4.5.2",
+        "ra-language-french": "^4.5.2",
         "react": "^17.0.0",
-        "react-admin": "^4.5.1",
+        "react-admin": "^4.5.4",
         "react-dom": "^17.0.0",
         "react-hook-form": "^7.34.2",
         "react-query": "^3.32.1",

diff --git a/examples/tutorial/index.html b/examples/tutorial/index.html
@@ -5,6 +5,10 @@
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + React + TS</title>
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
     </head>
     <body>
         <div id="root"></div>

diff --git a/examples/tutorial/src/App.css b/examples/tutorial/src/App.css
diff --git a/examples/tutorial/src/index.css b/examples/tutorial/src/index.css
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
diff --git a/examples/tutorial/src/main.tsx b/examples/tutorial/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>

diff --git a/lerna.json b/lerna.json
@@ -5,5 +5,5 @@
         "examples/simple",
         "packages/*"
     ],
-    "version": "4.5.1"
+    "version": "4.5.4"
 }
diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-core",
-    "version": "4.5.0",
+    "version": "4.5.2",
     "description": "Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React",
     "files": [
         "*.md",
-Original file line number
+Diff line change
@@ Expand Up @@
     />
     ```
-    This prop is passed to the underlying `react-autosuggest` component and is documented [in their respository](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
     ## `suggestionLimit`
     The `choices` prop can be very large, and rendering all of them would be very slow. To limit the number of suggestions displayed at any time, set the `suggestionLimit` prop:
@@ Expand Down @@