marmelab · fzaninotto · Feb 16, 2021 · Feb 2, 2021 · Feb 2, 2021 · Feb 4, 2021
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -8,7 +8,7 @@
         "@types/inflection": "^1.5.28",
         "@types/recharts": "^1.8.10",
         "data-generator-retail": "^3.9.0",
-        "fakerest": "^2.2.0",
+        "fakerest": "^3.0.0",
         "fetch-mock": "~6.3.0",
         "json-graphql-server": "~2.1.3",
         "proxy-polyfill": "^0.3.0",

diff --git a/examples/simple/.babelrc b/examples/simple/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-react"]
+}
diff --git a/examples/simple/.gitignore b/examples/simple/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/simple/babel.config.js b/examples/simple/babel.config.js
diff --git a/examples/simple/src/index.html → examples/simple/index-webpack.html b/examples/simple/src/index.html → examples/simple/index-webpack.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
-<html>
-
-<head>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Admin</title>
     <style>
-        body {
-            margin: 0;
-        }
+      body {
+        margin: 0;
+      }
     </style>
-    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
-</head>
-
-<body>
-    <div id="root">
-    </div>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>window.global = window</script>
+    <script src="/bundle.js"></script>
     <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
     <script>
         var WebFontConfig = {
@@ -28,6 +28,5 @@
             s.parentNode.insertBefore(wf, s);
         })();
     </script>
-</body>
-
+  </body>
 </html>
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -0,0 +1,32 @@
+<!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>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>window.global = window</script>
+    <script type="module" src="/src/index.tsx"></script>
+    <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
+    <script>
+        var WebFontConfig = {
+            google: { families: ['Roboto:300,400,500,700:latin'] }
+        };
+        (function () {
+            var wf = document.createElement('script');
+            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+            wf.type = 'text/javascript';
+            wf.async = 'true';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(wf, s);
+        })();
+    </script>
+  </body>
+</html>
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,49 +1,36 @@
 {
-    "name": "simple",
-    "private": true,
-    "version": "3.0.0",
-    "description": "",
-    "main": "index.html",
-    "scripts": {
-        "dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
-        "start": "USE_ALIAS=true ./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
-        "serve": "./node_modules/.bin/serve --listen 8080 ./dist",
-        "build": "./node_modules/.bin/webpack-cli --color --mode development --hide-modules true"
-    },
-    "author": "",
-    "license": "MIT",
-    "devDependencies": {
-        "@babel/cli": "^7.10.5",
-        "@babel/core": "^7.11.4",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/preset-react": "^7.10.4",
-        "@babel/preset-typescript": "^7.10.4",
-        "babel-loader": "^8.0.4",
-        "html-loader": "~1.3.0",
-        "html-webpack-plugin": "~4.3.0",
-        "ignore-not-found-export-plugin": "^1.0.1",
-        "serve": "^10.1.2",
-        "style-loader": "~1.2.1",
-        "wait-on": "^3.2.0",
-        "webpack": "~4.5.0",
-        "webpack-bundle-analyzer": "^3.3.2",
-        "webpack-cli": "~2.0.13",
-        "webpack-dev-server": "~3.1.11"
-    },
-    "dependencies": {
-        "@babel/polyfill": "^7.10.4",
-        "@material-ui/core": "^4.11.2",
-        "@material-ui/icons": "^4.11.2",
-        "ra-data-fakerest": "^3.9.0",
-        "ra-i18n-polyglot": "^3.9.0",
-        "ra-input-rich-text": "^3.9.0",
-        "ra-language-english": "^3.9.0",
-        "ra-language-french": "^3.9.0",
-        "react": "^17.0.0",
-        "react-admin": "^3.9.0",
-        "react-dom": "^17.0.0"
-    }
+  "name": "simple",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "ra-data-fakerest": "^3.9.0",
+    "ra-i18n-polyglot": "^3.9.0",
+    "ra-input-rich-text": "^3.9.0",
+    "ra-language-english": "^3.9.0",
+    "ra-language-french": "^3.9.0",
+    "react": "^17.0.0",
+    "react-admin": "^3.9.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.12.10",
+    "@vitejs/plugin-react-refresh": "^1.2.2",
+    "ts-loader": "^8.0.14",
+    "html-loader": "~1.3.0",
+    "html-webpack-plugin": "~4.3.0",	
+    "ignore-not-found-export-plugin": "^1.0.1",
+    "style-loader": "~1.2.1",
+    "typescript": "^4.1.3",
+    "vite": "^2.0.0-beta.62",
+    "webpack": "~4.5.0",
+    "webpack-cli": "~2.0.13",
+    "webpack-dev-server": "~3.1.11"
+  }
 }
diff --git a/examples/simple/sandbox.config.json b/examples/simple/sandbox.config.json
@@ -0,0 +1,9 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "node": "14"
+  }
+}
diff --git a/examples/simple/src/Layout.js → examples/simple/src/Layout.tsx b/examples/simple/src/Layout.js → examples/simple/src/Layout.tsx
diff --git a/examples/simple/src/addUploadFeature.js → examples/simple/src/addUploadFeature.tsx b/examples/simple/src/addUploadFeature.js → examples/simple/src/addUploadFeature.tsx
diff --git a/examples/simple/src/authProvider.js → examples/simple/src/authProvider.tsx b/examples/simple/src/authProvider.js → examples/simple/src/authProvider.tsx
diff --git a/...ples/simple/src/comments/CommentCreate.js → ...les/simple/src/comments/CommentCreate.tsx b/...ples/simple/src/comments/CommentCreate.js → ...les/simple/src/comments/CommentCreate.tsx
diff --git a/examples/simple/src/comments/CommentEdit.js → examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.js → examples/simple/src/comments/CommentEdit.tsx
@@ -1,5 +1,4 @@
-import Card from '@material-ui/core/Card';
-import Typography from '@material-ui/core/Typography';
+import { Card, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import * as React from 'react';
 import {

diff --git a/examples/simple/src/comments/CommentList.js → examples/simple/src/comments/CommentList.tsx b/examples/simple/src/comments/CommentList.js → examples/simple/src/comments/CommentList.tsx
diff --git a/examples/simple/src/comments/CommentShow.js → examples/simple/src/comments/CommentShow.tsx b/examples/simple/src/comments/CommentShow.js → examples/simple/src/comments/CommentShow.tsx
diff --git a/examples/simple/src/comments/PostPreview.js → examples/simple/src/comments/PostPreview.tsx b/examples/simple/src/comments/PostPreview.js → examples/simple/src/comments/PostPreview.tsx
diff --git a/...es/simple/src/comments/PostQuickCreate.js → ...s/simple/src/comments/PostQuickCreate.tsx b/...es/simple/src/comments/PostQuickCreate.js → ...s/simple/src/comments/PostQuickCreate.tsx
diff --git a/...c/comments/PostQuickCreateCancelButton.js → .../comments/PostQuickCreateCancelButton.tsx b/...c/comments/PostQuickCreateCancelButton.js → .../comments/PostQuickCreateCancelButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import IconCancel from '@material-ui/icons/Cancel';
 import { makeStyles } from '@material-ui/core/styles';
 

diff --git a/...simple/src/comments/PostReferenceInput.js → ...imple/src/comments/PostReferenceInput.tsx b/...simple/src/comments/PostReferenceInput.js → ...imple/src/comments/PostReferenceInput.tsx
@@ -3,11 +3,13 @@ import { Fragment, useState, useCallback } from 'react';
 import { FormSpy, useForm } from 'react-final-form';
 
 import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
+import {
+    Button,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+} from '@material-ui/core';
 
 import { ReferenceInput, SelectInput, useTranslate } from 'react-admin'; // eslint-disable-line import/no-unresolved
 

diff --git a/examples/simple/src/comments/index.js → examples/simple/src/comments/index.tsx b/examples/simple/src/comments/index.js → examples/simple/src/comments/index.tsx
diff --git a/examples/simple/src/customRouteLayout.js → examples/simple/src/customRouteLayout.tsx b/examples/simple/src/customRouteLayout.js → examples/simple/src/customRouteLayout.tsx
diff --git a/examples/simple/src/customRouteNoLayout.js → examples/simple/src/customRouteNoLayout.tsx b/examples/simple/src/customRouteNoLayout.js → examples/simple/src/customRouteNoLayout.tsx
diff --git a/examples/simple/src/data.js → examples/simple/src/data.tsx b/examples/simple/src/data.js → examples/simple/src/data.tsx
diff --git a/examples/simple/src/dataProvider.js → examples/simple/src/dataProvider.tsx b/examples/simple/src/dataProvider.js → examples/simple/src/dataProvider.tsx
diff --git a/examples/simple/src/i18n/en.js → examples/simple/src/i18n/en.ts b/examples/simple/src/i18n/en.js → examples/simple/src/i18n/en.ts
diff --git a/examples/simple/src/i18n/fr.js → examples/simple/src/i18n/fr.ts b/examples/simple/src/i18n/fr.js → examples/simple/src/i18n/fr.ts
diff --git a/examples/simple/src/i18n/index.js → examples/simple/src/i18n/index.ts b/examples/simple/src/i18n/index.js → examples/simple/src/i18n/index.ts
diff --git a/examples/simple/src/i18nProvider.js → examples/simple/src/i18nProvider.tsx b/examples/simple/src/i18nProvider.js → examples/simple/src/i18nProvider.tsx
@@ -2,7 +2,7 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from './i18n/en';
 
 const messages = {
-    fr: () => import('./i18n/fr.js').then(messages => messages.default),
+    fr: () => import('./i18n/fr').then(messages => messages.default),
 };
 
 export default polyglotI18nProvider(locale => {

diff --git a/examples/simple/src/index.js → examples/simple/src/index.tsx b/examples/simple/src/index.js → examples/simple/src/index.tsx
diff --git a/examples/simple/src/posts/PostCreate.js → examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.js → examples/simple/src/posts/PostCreate.tsx
diff --git a/examples/simple/src/posts/PostEdit.js → examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.js → examples/simple/src/posts/PostEdit.tsx
diff --git a/examples/simple/src/posts/PostList.js → examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.js → examples/simple/src/posts/PostList.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Children, Fragment, cloneElement, memo } from 'react';
 import BookIcon from '@material-ui/icons/Book';
-import Chip from '@material-ui/core/Chip';
-import { useMediaQuery } from '@material-ui/core';
+import { Chip, useMediaQuery } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import lodashGet from 'lodash/get';
 import jsonExport from 'jsonexport/dist';

diff --git a/examples/simple/src/posts/PostShow.js → examples/simple/src/posts/PostShow.tsx b/examples/simple/src/posts/PostShow.js → examples/simple/src/posts/PostShow.tsx
@@ -23,7 +23,7 @@ import {
     useLocale,
 } from 'react-admin';
 import { Link } from 'react-router-dom';
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import PostTitle from './PostTitle';
 
 const CreateRelatedComment = ({ record }) => (

diff --git a/examples/simple/src/posts/PostTitle.js → examples/simple/src/posts/PostTitle.tsx b/examples/simple/src/posts/PostTitle.js → examples/simple/src/posts/PostTitle.tsx
diff --git a/...ples/simple/src/posts/ResetViewsButton.js → ...les/simple/src/posts/ResetViewsButton.tsx b/...ples/simple/src/posts/ResetViewsButton.js → ...les/simple/src/posts/ResetViewsButton.tsx
diff --git a/...les/simple/src/posts/TagReferenceInput.js → ...es/simple/src/posts/TagReferenceInput.tsx b/...les/simple/src/posts/TagReferenceInput.js → ...es/simple/src/posts/TagReferenceInput.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { useForm } from 'react-final-form';
 import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
-import Button from '@material-ui/core/Button';
+import { Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({

diff --git a/examples/simple/src/posts/index.js → examples/simple/src/posts/index.tsx b/examples/simple/src/posts/index.js → examples/simple/src/posts/index.tsx
diff --git a/examples/simple/src/tags/TagCreate.js → examples/simple/src/tags/TagCreate.tsx b/examples/simple/src/tags/TagCreate.js → examples/simple/src/tags/TagCreate.tsx
diff --git a/examples/simple/src/tags/TagEdit.js → examples/simple/src/tags/TagEdit.tsx b/examples/simple/src/tags/TagEdit.js → examples/simple/src/tags/TagEdit.tsx
diff --git a/examples/simple/src/tags/TagList.js → examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.js → examples/simple/src/tags/TagList.tsx
diff --git a/examples/simple/src/tags/TagShow.js → examples/simple/src/tags/TagShow.tsx b/examples/simple/src/tags/TagShow.js → examples/simple/src/tags/TagShow.tsx
diff --git a/examples/simple/src/tags/index.js → examples/simple/src/tags/index.tsx b/examples/simple/src/tags/index.js → examples/simple/src/tags/index.tsx
diff --git a/examples/simple/src/users/Aside.js → examples/simple/src/users/Aside.tsx b/examples/simple/src/users/Aside.js → examples/simple/src/users/Aside.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from '@material-ui/core/Typography';
+import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({

diff --git a/examples/simple/src/users/UserCreate.js → examples/simple/src/users/UserCreate.tsx b/examples/simple/src/users/UserCreate.js → examples/simple/src/users/UserCreate.tsx
diff --git a/examples/simple/src/users/UserEdit.js → examples/simple/src/users/UserEdit.tsx b/examples/simple/src/users/UserEdit.js → examples/simple/src/users/UserEdit.tsx
diff --git a/...ples/simple/src/users/UserEditEmbedded.js → ...les/simple/src/users/UserEditEmbedded.tsx b/...ples/simple/src/users/UserEditEmbedded.js → ...les/simple/src/users/UserEditEmbedded.tsx
diff --git a/examples/simple/src/users/UserList.js → examples/simple/src/users/UserList.tsx b/examples/simple/src/users/UserList.js → examples/simple/src/users/UserList.tsx
diff --git a/examples/simple/src/users/UserShow.js → examples/simple/src/users/UserShow.tsx b/examples/simple/src/users/UserShow.js → examples/simple/src/users/UserShow.tsx
diff --git a/examples/simple/src/users/UserTitle.js → examples/simple/src/users/UserTitle.tsx b/examples/simple/src/users/UserTitle.js → examples/simple/src/users/UserTitle.tsx
diff --git a/examples/simple/src/users/index.js → examples/simple/src/users/index.tsx b/examples/simple/src/users/index.js → examples/simple/src/users/index.tsx
diff --git a/examples/simple/src/validators.js → examples/simple/src/validators.tsx b/examples/simple/src/validators.js → examples/simple/src/validators.tsx
diff --git a/examples/simple/tsconfig.json b/examples/simple/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "outDir": "lib",
+        "rootDir": "src",
+        "declaration": true,
+        "allowJs": false,
+        "jsx": "react",
+        "lib": [
+            "es2017",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true
+    },
+    "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js"],
+    "include": ["src"]
+}
diff --git a/examples/simple/vite.config.js b/examples/simple/vite.config.js
@@ -0,0 +1,35 @@
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import path from 'path';
+
+/**
+ * https://vitejs.dev/config/
+ * @type { import('vite').UserConfig }
+ */
+export default {
+    plugins: [reactRefresh()],
+    alias: [
+        {
+            find: /^react-admin$/,
+            replacement: path.resolve(
+                __dirname,
+                '../../packages/react-admin/src'
+            ),
+        },
+        {
+            find: /^ra-(.*)$/,
+            replacement: path.resolve(__dirname, '../../packages/ra-$1/src'),
+        },
+        {
+            find: /^@material-ui\/icons\/(.*)/,
+            replacement: '@material-ui/icons/esm/$1',
+        },
+        {
+            find: /^@material-ui\/core\/(.+)/,
+            replacement: '@material-ui/core/es/$1',
+        },
+        {
+            find: /^@material-ui\/core$/,
+            replacement: '@material-ui/core/es',
+        },
+    ],
+};
diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -1,79 +1,36 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-    .BundleAnalyzerPlugin;
-
-const packagesPath = [__dirname, '..', '..', 'packages'];
 
 module.exports = {
+    entry: './src/index.tsx',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js',
+    },
     devtool: 'cheap-module-source-map',
+    resolve: {
+        // Add `.ts` and `.tsx` as a resolvable extension.
+        extensions: ['.ts', '.tsx', '.js'],
+    },
     module: {
         rules: [
             {
                 test: /\.(t|j)sx?$/,
                 exclude: /node_modules/,
-                use: { loader: 'babel-loader' },
-            },
-            {
-                test: /\.html$/,
-                exclude: /node_modules/,
-                use: { loader: 'html-loader' },
+                use: {
+                    loader: 'ts-loader',
+                    options: {
+                        transpileOnly: true,
+                    },
+                },
             },
         ],
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: './src/index.html',
+            template: './index-webpack.html',
         }),
-    ].concat(
-        process.env.NODE_ENV === 'development'
-            ? [new BundleAnalyzerPlugin()]
-            : []
-    ),
-    resolve:
-        process.env.USE_ALIAS === 'true'
-            ? {
-                  extensions: ['.ts', '.js', '.tsx', '.json'],
-                  alias: {
-                      'ra-core': path.join(...packagesPath, 'ra-core', 'src'),
-                      'ra-language-french': path.join(
-                          ...packagesPath,
-                          'ra-language-french',
-                          'src'
-                      ),
-                      'ra-language-english': path.join(
-                          ...packagesPath,
-                          'ra-language-english',
-                          'src'
-                      ),
-                      'ra-ui-materialui': path.join(
-                          ...packagesPath,
-                          'ra-ui-materialui',
-                          'src'
-                      ),
-                      'react-admin': path.join(
-                          ...packagesPath,
-                          'react-admin',
-                          'src'
-                      ),
-                      'ra-data-fakerest': path.join(
-                          ...packagesPath,
-                          'ra-data-fakerest',
-                          'src'
-                      ),
-                      'ra-i18n-polyglot': path.join(
-                          ...packagesPath,
-                          'ra-i18n-polyglot',
-                          'src'
-                      ),
-                      'ra-input-rich-text': path.join(
-                          ...packagesPath,
-                          'ra-input-rich-text',
-                          'src'
-                      ),
-                  },
-              }
-            : {},
+    ],
     devServer: {
         disableHostCheck: true,
         host: '127.0.0.1',

diff --git a/packages/ra-core/src/inference/index.ts b/packages/ra-core/src/inference/index.ts
@@ -2,5 +2,6 @@ import getElementsFromRecords from './getElementsFromRecords';
 import InferredElement from './InferredElement';
 
 export * from './inferTypeFromValues';
+export * from './types';
 
 export { getElementsFromRecords, InferredElement };
diff --git a/packages/ra-data-fakerest/package.json b/packages/ra-data-fakerest/package.json
@@ -37,7 +37,7 @@
         "watch": "tsc --outDir esm --module es2015 --watch"
     },
     "dependencies": {
-        "fakerest": "^2.2.0"
+        "fakerest": "^3.0.0"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",

diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx
@@ -2,10 +2,12 @@ import * as React from 'react';
 import { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form } from 'react-final-form';
-import CardActions from '@material-ui/core/CardActions';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import {
+    Button,
+    CardActions,
+    CircularProgress,
+    TextField,
+} from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useTranslate, useLogin, useNotify, useSafeSetState } from 'ra-core';
 

diff --git a/...ui-materialui/src/detail/CreateActions.js → ...i-materialui/src/detail/CreateActions.tsx b/...ui-materialui/src/detail/CreateActions.js → ...i-materialui/src/detail/CreateActions.tsx
@@ -5,14 +5,6 @@ import TopToolbar from '../layout/TopToolbar';
 import { ListButton } from '../button';
 import { useCreateContext, useResourceDefinition } from 'ra-core';
 
-const sanitizeRestProps = ({
-    basePath,
-    className,
-    hasList,
-    resource,
-    ...rest
-}) => rest;
-
 /**
  * Action Toolbar for the Create view
  *
@@ -38,7 +30,7 @@ const sanitizeRestProps = ({
  *         </Create>
  *     );
  */
-const CreateActions = ({ className, ...rest }) => {
+const CreateActions = ({ className, ...rest }: CreateActionsProps) => {
     const { basePath } = useCreateContext(rest);
     const { hasList } = useResourceDefinition(rest);
     return (
@@ -48,6 +40,22 @@ const CreateActions = ({ className, ...rest }) => {
     );
 };
 
+const sanitizeRestProps = ({
+    basePath = null,
+    className = null,
+    hasList = null,
+    resource = null,
+    ...rest
+}) => rest;
+
+interface CreateActionsProps {
+    basePath?: string;
+    className?: string;
+    hasShow?: boolean;
+    hasList?: boolean;
+    resource?: string;
+}
+
 CreateActions.propTypes = {
     basePath: PropTypes.string,
     className: PropTypes.string,

diff --git a/...i-materialui/src/detail/editFieldTypes.js → ...-materialui/src/detail/editFieldTypes.tsx b/...i-materialui/src/detail/editFieldTypes.js → ...-materialui/src/detail/editFieldTypes.tsx
@@ -1,30 +1,40 @@
 import * as React from 'react';
+import { ReactNode, ReactElement } from 'react';
 import SimpleForm from '../form/SimpleForm';
 import SimpleFormIterator from '../form/SimpleFormIterator';
 import ArrayInput from '../input/ArrayInput';
 import BooleanInput from '../input/BooleanInput';
 import DateInput from '../input/DateInput';
 import NumberInput from '../input/NumberInput';
 import ReferenceInput from '../input/ReferenceInput';
-import ReferenceArrayInput from '../input/ReferenceArrayInput';
+import ReferenceArrayInput, {
+    ReferenceArrayInputProps,
+} from '../input/ReferenceArrayInput';
 import SelectInput from '../input/SelectInput';
 import TextInput from '../input/TextInput';
+import { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
 
-export default {
+const editFieldTypes: InferredTypeMap = {
     form: {
         component: SimpleForm,
-        representation: (_, children) => `        <SimpleForm>
+        representation: (
+            _,
+            children: InferredElement[]
+        ) => `        <SimpleForm>
 ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
         </SimpleForm>`,
     },
     array: {
         // eslint-disable-next-line react/display-name
-        component: ({ children, ...props }) => (
+        component: ({
+            children,
+            ...props
+        }: { children: ReactNode } & InputProps) => (
             <ArrayInput {...props}>
                 <SimpleFormIterator>{children}</SimpleFormIterator>
             </ArrayInput>
         ),
-        representation: (props, children) =>
+        representation: (props: InputProps, children: InferredElement[]) =>
             `<ArrayInput source="${
                 props.source
             }"><SimpleFormIterator>${children
@@ -33,54 +43,68 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
     },
     boolean: {
         component: BooleanInput,
-        representation: props => `<BooleanInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<BooleanInput source="${props.source}" />`,
     },
     date: {
         component: DateInput,
-        representation: props => `<DateInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<DateInput source="${props.source}" />`,
     },
     email: {
         component: TextInput,
-        representation: props => `<TextInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextInput source="${props.source}" />`,
     },
     id: {
         component: TextInput,
-        representation: props => `<TextInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextInput source="${props.source}" />`,
     },
     number: {
         component: NumberInput,
-        representation: props => `<NumberInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<NumberInput source="${props.source}" />`,
     },
     reference: {
         component: ReferenceInput,
-        representation: (props, children) =>
+        representation: (props: InputProps, children: InferredElement) =>
             `<ReferenceInput source="${props.source}" reference="${
                 props.reference
             }">${children.getRepresentation()}</ReferenceInput>`,
     },
     referenceChild: {
-        component: props => <SelectInput optionText="id" {...props} />, // eslint-disable-line react/display-name
+        component: (props: { children: ReactNode } & InputProps) => (
+            <SelectInput optionText="id" {...props} />
+        ), // eslint-disable-line react/display-name
         representation: () => `<SelectInput optionText="id" />`,
     },
     referenceArray: {
         component: ReferenceArrayInput,
-        representation: props =>
+        representation: (props: ReferenceArrayInputProps) =>
             `<ReferenceArrayInput source="${props.source}" reference="${props.reference}"><TextInput source="id" /></ReferenceArrayInput>`,
     },
     referenceArrayChild: {
-        component: props => <SelectInput optionText="id" {...props} />, // eslint-disable-line react/display-name
+        component: (
+            props: { children: ReactNode } & InputProps
+        ): ReactElement => <SelectInput optionText="id" {...props} />, // eslint-disable-line react/display-name
         representation: () => `<SelectInput optionText="id" />`,
     },
     richText: {
         component: TextInput,
-        representation: props => `<TextInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextInput source="${props.source}" />`,
     },
     string: {
         component: TextInput,
-        representation: props => `<TextInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextInput source="${props.source}" />`,
     },
     url: {
         component: TextInput,
-        representation: props => `<TextInput source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextInput source="${props.source}" />`,
     },
 };
+
+export default editFieldTypes;
diff --git a/...i-materialui/src/detail/showFieldTypes.js → ...-materialui/src/detail/showFieldTypes.tsx b/...i-materialui/src/detail/showFieldTypes.js → ...-materialui/src/detail/showFieldTypes.tsx
@@ -1,32 +1,39 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import Datagrid from '../list/datagrid/Datagrid';
 import ArrayField from '../field/ArrayField';
 import BooleanField from '../field/BooleanField';
 import DateField from '../field/DateField';
 import EmailField from '../field/EmailField';
 import NumberField from '../field/NumberField';
-import ReferenceField from '../field/ReferenceField';
+import ReferenceField, { ReferenceFieldProps } from '../field/ReferenceField';
 import ReferenceArrayField from '../field/ReferenceArrayField';
 import RichTextField from '../field/RichTextField';
-import SimpleShowLayout from './SimpleShowLayout';
+import SimpleShowLayout, { SimpleShowLayoutProps } from './SimpleShowLayout';
 import TextField from '../field/TextField';
 import UrlField from '../field/UrlField';
+import { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
 
-export default {
+const showFieldTypes: InferredTypeMap = {
     show: {
-        component: props => <SimpleShowLayout {...props} />, // eslint-disable-line react/display-name
+        component: (props: SimpleShowLayoutProps) => (
+            <SimpleShowLayout {...props} />
+        ), // eslint-disable-line react/display-name
         representation: (_, children) => `        <SimpleShowLayout>
 ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
         </SimpleShowLayout>`,
     },
     array: {
         // eslint-disable-next-line react/display-name
-        component: ({ children, ...props }) => (
+        component: ({
+            children,
+            ...props
+        }: { children: ReactNode } & InputProps) => (
             <ArrayField {...props}>
                 <Datagrid>{children}</Datagrid>
             </ArrayField>
         ),
-        representation: (props, children) =>
+        representation: (props: InputProps, children: InferredElement[]) =>
             `<ArrayField source="${
                 props.source
             }"><Datagrid>${children
@@ -35,52 +42,66 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
     },
     boolean: {
         component: BooleanField,
-        representation: props => `<BooleanField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<BooleanField source="${props.source}" />`,
     },
     date: {
         component: DateField,
-        representation: props => `<DateField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<DateField source="${props.source}" />`,
     },
     email: {
         component: EmailField,
-        representation: props => `<EmailField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<EmailField source="${props.source}" />`,
     },
     id: {
         component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextField source="${props.source}" />`,
     },
     number: {
         component: NumberField,
-        representation: props => `<NumberField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<NumberField source="${props.source}" />`,
     },
     reference: {
         component: ReferenceField,
-        representation: props =>
+        representation: (props: ReferenceFieldProps) =>
             `<ReferenceField source="${props.source}" reference="${props.reference}"><TextField source="id" /></ReferenceField>`,
     },
     referenceChild: {
-        component: props => <TextField source="id" {...props} />, // eslint-disable-line react/display-name
+        component: (props: { children: ReactNode } & InputProps) => (
+            <TextField source="id" {...props} />
+        ), // eslint-disable-line react/display-name
         representation: () => `<TextField source="id" />`,
     },
     referenceArray: {
         component: ReferenceArrayField,
-        representation: props =>
+        representation: (props: InputProps) =>
             `<ReferenceArrayField source="${props.source}" reference="${props.reference}"><TextField source="id" /></ReferenceArrayField>`,
     },
     referenceArrayChild: {
-        component: props => <TextField source="id" {...props} />, // eslint-disable-line react/display-name
+        component: (props: { children: ReactNode } & InputProps) => (
+            <TextField source="id" {...props} />
+        ), // eslint-disable-line react/display-name
         representation: () => `<TextField source="id" />`,
     },
     richText: {
         component: RichTextField,
-        representation: props => `<RichTextField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<RichTextField source="${props.source}" />`,
     },
     string: {
         component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<TextField source="${props.source}" />`,
     },
     url: {
         component: UrlField,
-        representation: props => `<UrlField source="${props.source}" />`,
+        representation: (props: InputProps) =>
+            `<UrlField source="${props.source}" />`,
     },
 };
+
+export default showFieldTypes;
diff --git a/...terialui/src/input/ResettableTextField.js → ...erialui/src/input/ResettableTextField.tsx b/...terialui/src/input/ResettableTextField.js → ...erialui/src/input/ResettableTextField.tsx
@@ -2,46 +2,23 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import MuiTextField from '@material-ui/core/TextField';
+import {
+    InputAdornment,
+    IconButton,
+    TextField as MuiTextField,
+    TextFieldProps,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
-import { useTranslate } from 'ra-core';
-
-const useStyles = makeStyles(
-    {
-        clearIcon: {
-            height: 16,
-            width: 0,
-        },
-        visibleClearIcon: {
-            width: 16,
-        },
-        clearButton: {
-            height: 24,
-            width: 24,
-            padding: 0,
-        },
-        selectAdornment: {
-            position: 'absolute',
-            right: 24,
-        },
-        inputAdornedEnd: {
-            paddingRight: 0,
-        },
-    },
-    { name: 'RaResettableTextField' }
-);
-
-const handleMouseDownClearButton = event => {
-    event.preventDefault();
-};
+import { InputProps, useTranslate } from 'ra-core';
+import { ClassesOverride } from '../types';
 
 /**
  * An override of the default Material-UI TextField which is resettable
  */
-function ResettableTextField(props) {
+function ResettableTextField(
+    props: InputProps<ResettableTextFieldProps & TextFieldProps>
+) {
     const {
         classes: classesOverride,
         clearAlwaysVisible,
@@ -84,7 +61,6 @@ function ResettableTextField(props) {
         clearIcon,
         inputAdornedEnd,
         selectAdornment,
-        visibleClearButton,
         visibleClearIcon,
         ...restClasses
     } = classes;
@@ -196,6 +172,35 @@ function ResettableTextField(props) {
     );
 }
 
+const useStyles = makeStyles(
+    {
+        clearIcon: {
+            height: 16,
+            width: 0,
+        },
+        visibleClearIcon: {
+            width: 16,
+        },
+        clearButton: {
+            height: 24,
+            width: 24,
+            padding: 0,
+        },
+        selectAdornment: {
+            position: 'absolute',
+            right: 24,
+        },
+        inputAdornedEnd: {
+            paddingRight: 0,
+        },
+    },
+    { name: 'RaResettableTextField' }
+);
+
+const handleMouseDownClearButton = event => {
+    event.preventDefault();
+};
+
 ResettableTextField.propTypes = {
     classes: PropTypes.object,
     clearAlwaysVisible: PropTypes.bool,
@@ -208,4 +213,10 @@ ResettableTextField.propTypes = {
     value: PropTypes.any.isRequired,
 };
 
+interface ResettableTextFieldProps {
+    classes?: ClassesOverride<typeof useStyles>;
+    clearAlwaysVisible?: boolean;
+    resettable?: boolean;
+}
+
 export default ResettableTextField;
diff --git a/...materialui/src/layout/LoadingIndicator.js → ...aterialui/src/layout/LoadingIndicator.tsx b/...materialui/src/layout/LoadingIndicator.js → ...aterialui/src/layout/LoadingIndicator.tsx
@@ -4,24 +4,15 @@ import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { useRefreshWhenVisible } from 'ra-core';
+import { ReduxState, useRefreshWhenVisible } from 'ra-core';
 
 import RefreshIconButton from '../button/RefreshIconButton';
+import { ClassesOverride } from '../types';
 
-const useStyles = makeStyles(
-    theme => ({
-        loader: {
-            margin: theme.spacing(2),
-        },
-        loadedIcon: {},
-    }),
-    { name: 'RaLoadingIndicator' }
-);
-
-const LoadingIndicator = props => {
+const LoadingIndicator = (props: LoadingIndicatorProps) => {
     const { classes: classesOverride, className, ...rest } = props;
     useRefreshWhenVisible();
-    const loading = useSelector(state => state.admin.loading > 0);
+    const loading = useSelector<ReduxState>(state => state.admin.loading > 0);
     const classes = useStyles(props);
     const theme = useTheme();
     return loading ? (
@@ -37,10 +28,25 @@ const LoadingIndicator = props => {
     );
 };
 
+const useStyles = makeStyles(
+    theme => ({
+        loader: {
+            margin: theme.spacing(2),
+        },
+        loadedIcon: {},
+    }),
+    { name: 'RaLoadingIndicator' }
+);
+
 LoadingIndicator.propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
     width: PropTypes.string,
 };
 
+interface LoadingIndicatorProps {
+    className?: string;
+    classes?: ClassesOverride<typeof useStyles>;
+}
+
 export default LoadingIndicator;
diff --git a/yarn.lock b/yarn.lock