[l10n] Port locale to TypeScript (#20685)

babel.config.js

@@ -40,7 +40,7 @@ const productionPlugins = [
 ];
 
 module.exports = {
-  presets: defaultPresets.concat(['@babel/preset-react']),
+  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
   plugins: [
     'babel-plugin-optimize-clsx',
     ['@babel/plugin-proposal-class-properties', { loose: true }],

docs/next.config.js

@@ -121,7 +121,7 @@ module.exports = {
           },
           // required to transpile ../packages/
           {
-            test: /\.(js|mjs|jsx)$/,
+            test: /\.(js|mjs|jsx|ts)$/,
             include: [workspaceRoot],
             exclude: /node_modules/,
             use: options.defaultLoaders.babel,

docs/pages/api-docs/table-pagination.md

@@ -35,7 +35,7 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1. |
 | <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`</span> | Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
+| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">string</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
 | <span class="prop-name">nextIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Next page'</span> | Text label for the next arrow icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name required">onChangePage&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |

docs/webpackBaseConfig.js

@@ -16,6 +16,7 @@ module.exports = {
       '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
       docs: path.resolve(__dirname, '../docs'),
     },
+    extensions: ['.js', '.ts'],
   },
   output: {
     path: path.join(__dirname, 'build'),
@@ -25,7 +26,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         query: {

packages/material-ui/package.json

@@ -25,16 +25,17 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:umd && yarn build:copy-files",
-    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"**/*.test.js\"",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --out-dir ./build/esm --ignore \"**/*.test.js\"",
-    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"**/*.test.js\"",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:umd && yarn build:copy-files && yarn build:types",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build --ignore \"**/*.test.js,**/*.d.ts\"",
+    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build/esm --ignore \"**/*.test.js,**/*.d.ts\"",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build/es --ignore \"**/*.test.js,**/*.d.ts\"",
     "build:umd": "cross-env BABEL_ENV=production-umd rollup -c scripts/rollup.config.js",
     "build:copy-files": "node ../../scripts/copy-files.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "prebuild": "rimraf build",
     "release": "yarn build && npm publish build --tag latest",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui/**/*.test.js' --exclude '**/node_modules/**'",
-    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{ts,tsx}\" && tsc -p tsconfig.test.json"
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.test.json && tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
     "@types/react": "^16.8.6",

packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -3,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
   props: P & {
+    expandText?: string;
     itemsAfterCollapse?: number;
     itemsBeforeCollapse?: number;
     maxItems?: number;

packages/material-ui/src/TablePagination/TablePagination.d.ts

@@ -17,11 +17,13 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
   props: P &
     TablePaginationBaseProps & {
       ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
+      backIconButtonText?: string;
       backIconButtonProps?: Partial<IconButtonProps>;
       count: number;
       labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
-      labelRowsPerPage?: React.ReactNode;
+      labelRowsPerPage?: string;
       nextIconButtonProps?: Partial<IconButtonProps>;
+      nextIconButtonText?: string;
       onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
       onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
       page: number;

packages/material-ui/src/TablePagination/TablePagination.js

@@ -218,7 +218,7 @@ TablePagination.propTypes = {
    *
    * For localization purposes, you can use the provided [translations](/guides/localization/).
    */
-  labelRowsPerPage: PropTypes.node,
+  labelRowsPerPage: PropTypes.string,
   /**
    * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
    */