Merge pull request #10929 from marmelab/update-TreeInput-assets

[Doc] Update `<TreeInput>` assets and doc

Author: djhi

docs/ReferenceInput.md

@@ -428,8 +428,7 @@ You can learn more about the `create` prop in the documentation of the selection
 If the reference resource is a tree, use [`<ReferenceNodeInput>`](./ReferenceNodeInput.md) instead of `<ReferenceInput>`.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/ReferenceNodeInput.md

@@ -8,8 +8,7 @@ title: "The ReferenceNodeInput Component"
 This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component allows users to select one or several nodes from a tree of a reference resource. For instance, this is useful to select a category for a product.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 
@@ -58,8 +57,7 @@ const ProductEdit = () => (
 ```
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-multiple.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-multiple.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-multiple.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/SelectInput.md

@@ -751,8 +751,7 @@ const CreateCategory = () => {
 If the choices form a hierarchy or a tree, use the [`<TreeInput>`](./TreeInput.md) component instead of `<SelectInput>`. It renders a collapsible tree structure, and lets users select a value by clicking on a node.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/TreeInput.md

@@ -8,8 +8,7 @@ title: "The TreeInput Component"
 This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component allows to select one or several nodes from a tree.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 
@@ -51,9 +50,13 @@ export const SimpleTreeForm = () => (
 | `source`        | Required | string           | -         | The name of the source field. Required unless when used inside `<ReferenceNodeInput>` |
 | `checkStrictly` | Optional | boolena          | `true`    | Check node precisely, parent and children nodes are not associated                    |
 | `data`          | Optional | array of objects | -         | The tree data                                                                         |
+| `id`            | Optional | string           | -         | The input id                                                                          |
 | `hideRootNodes` | Optional | boolean          | `false`   | Set to true to hide all root nodes                                                    |
+| `margin`        | Optional | string           | `dense`   | The margin of the input, can be `none`, `dense` or `normal` (see MUI Input margins)   |
 | `multiple`      | Optional | boolean          | `false`   | Set to true to allow selecting multiple nodes                                         |
+| `size`          | Optional | string           | `small`   | The size of the input, can be `small`, `medium` or `large` (see MUI Input sizes)      |
 | `titleField`    | Optional | string           | `'title'` | The name of the field holding the node title                                          |
+| `variant`       | Optional | string           | `filled`  | The variant to use, e.g. `standard`, `outlined` or `filled` (see MUI Input variants)  |
 
 `<TreeInput>` also accepts the [common input props](./Inputs.md#common-input-props) and the [rc-tree](https://tree-react-component.vercel.app/) props.
 
@@ -110,8 +113,7 @@ Use the `hideRootNodes` prop to hide all root nodes:
 Use the `multiple` prop to allow selecting multiple nodes. In that case, `<TreeInput>` renders a tree with one checkbox per line.
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-multiple.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-multiple.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-multiple.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/TreeWithDetails.md

@@ -484,8 +484,7 @@ export const ProductEdit = () => (
 ```
 
 <video controls autoplay playsinline muted loop>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
-  <source src="./img/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>
 

docs/assets/features.md_ignore

@@ -327,7 +327,7 @@ The `<PrevNextButtons>` component renders navigation buttons linking to the next
 The `<TreeInput>` component allows to select one or several nodes from a tree. #input #tree https://marmelab.com/react-admin/TreeInput.html
 
 <video controls autoplay playsinline muted loop>
-  <source src="https://marmelab.com/react-admin/img/ReferenceNodeInput-TreeInput-basic.webm" type="video/webm"/>
+  <source src="https://react-admin-ee.marmelab.com/assets/ReferenceNodeInput-TreeInput-basic.mp4" type="video/mp4"/>
   Your browser does not support the video tag.
 </video>