v5.0.0-alpha.35 (#26499)

CHANGELOG.md

@@ -1,5 +1,168 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 5.0.0-alpha.35
+
+<!-- generated comparing v5.0.0-alpha.34..next -->
+
+_May 31, 2021_
+
+Big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 👩‍🎤 We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova.
+- 📦 Save [10 kB gzipped](https://bundlephobia.com/result?p=@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
+- ⚒️ Add many new [codemods](https://github.com/mui-org/material-ui/blob/HEAD/packages/material-ui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@material-ui/core@5.0.0-alpha.35`
+
+#### Breaking changes
+
+- [styles] Remove `makeStyles` from `@material-ui/core` (#26382) @mnajdova
+
+  The `makeStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, it's recommended you use the `ThemeProvider` component from `@material-ui/core` instead.
+
+  ```diff
+  -import { makeStyles } from '@material-ui/core/styles';
+  +import { makeStyles } from '@material-ui/styles';
+  +import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+
+  +const theme = createTheme();
+   const useStyles = makeStyles((theme) => ({
+     background: theme.palette.primary.main,
+   }));
+   function Component() {
+     const classes = useStyles();
+     return <div className={classes.root} />
+   }
+
+   // In the root of your app
+   function App(props) {
+  -  return <Component />;
+  +  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
+   }
+  ```
+
+- [styles] Remove `withStyles` from `@material-ui/core` (#26377) @mnajdova
+
+  The `withStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, you should use the `ThemeProvider` component from `@material-ui/core` instead.
+
+  ```diff
+  -import { withStyles } from '@material-ui/core/styles';
+  +import { withStyles } from '@material-ui/styles';
+  +import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+
+  +const defaultTheme = createTheme();
+   const MyComponent = withStyles((props) => {
+     const { classes, className, ...other } = props;
+     return <div className={clsx(className, classes.root)} {...other} />
+   })(({ theme }) => ({ root: { background: theme.palette.primary.main }}));
+
+   function App() {
+  -  return <MyComponent />;
+  +  return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
+   }
+  ```
+
+- [styles] Merge options in `experimentalStyled` (#26396) @mnajdova
+
+  The options inside the `experimentalStyled` module are now merged under one object. In the coming weeks, we will rename ths module: `styled()` to signal that it's no longer experimental.
+
+  ```diff
+  -experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
+  +experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);
+  ```
+
+- [Tabs] Update `min` & `max` width and remove `minWidth` media query (#26458) @siriwatknp
+
+  Update the implementation to better match Material Design:
+
+  - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs)
+  - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs)
+
+#### Changes
+
+- [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24
+- [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb
+- [Select] Open popup below button (#26200) @oliviertassinari
+- [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp
+- [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari
+
+### `@material-ui/codemod@5.0.0-alpha.35`
+
+- [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes
+- [codemod] Correct path and add target placeholder (#26414) @mbrookes
+
+### `@material-ui/icons@5.0.0-alpha.35`
+
+- [icons] Use array children instead of React fragments (#26309) @eps1lon
+
+  Reduce a bit the size of the package.
+
+### `@material-ui/system@5.0.0-alpha.35`
+
+We are progressively moving all modules that are relevant to styling custom design systems in this package. It's meant to be complementary with `@material-ui/unstyled`.
+
+- [system] Add Box to system (#26379) @mnajdova
+- [system] Add createStyled utility (#26485) @mnajdova
+
+### `@material-ui/styled-engine-sc@5.0.0-alpha.35`
+
+- [styled-engine] Fix styled() util to respect `options` (#26339) @pasDamola
+
+### `@material-ui/lab@5.0.0-alpha.35`
+
+#### Breaking changes
+
+- [pickers] Remove allowKeyboardControl (#26451) @eps1lon
+- [ClockPicker] Rework keyboard implementation (#26400) @eps1lon
+
+  Remove the `allowKeyboardControl` prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default.
+
+#### Changes
+
+- [Button] Migrate LoadingButton to emotion (#26370) @siriwatknp
+- [ClockPicker] Selected option is the active descendant (#26411) @eps1lon
+- [DatePicker] Migrate CalendarPicker to emotion (#26390) @siriwatknp
+- [DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335) @siriwatknp
+- [DateRangePicker] Migrate DateRangePickerDay to emotion (#26368) @siriwatknp
+- [DateRangePicker] Migrate internal components to emotion (#26326) @siriwatknp
+- [pickers] Migrate PickersCalendarHeader to emotion (#26354) @siriwatknp
+- [pickers] Migrate PickersModalDialog to emotion (#26355) @siriwatknp
+- [pickers] Migrate PickersPopper to emotion (#26391) @siriwatknp
+- [pickers] Migrate PickersTransition to emotion (#26353) @siriwatknp
+- [TimePicker] Migrate ClockPicker to emotion (#26389) @siriwatknp
+- [TreeView] Correctly select items in deeply nested trees (#26413) @Dru89
+
+### Docs
+
+- [docs] Add page for `experimentalStyled()` (#26361) @mnajdova
+- [docs] Add TypeScript convention (#26259) @siriwatknp
+- [docs] Add warning about git-blame-ignore-revs (#26487) @eps1lon
+- [docs] Clarify migration from Hidden (#26348) @m4theushw
+- [docs] Fix grammar for style library page (#26325) @mbrookes
+- [docs] Persist copied state indefinitely or until the user moves their cursor (#26336) @eps1lon
+- [docs] Typo in MultipleSelect (#26466) @wolfykey
+- [docs] Update system installation for v5 (#26481) @mnajdova
+- [template] Demo how to retreive form value (#26393) @akshitsuri
+
+### Core
+
+- [core] Batch small changes (#26434) @oliviertassinari
+- [core] Fix peer dependencies declaration with yarn v2 (#26433) @oliviertassinari
+- [core] Remove `@material-ui/styles` dependencies from declaration files too (#26376) @mnajdova
+- [core] Revert Leverage CircleCI workspaces for jobs after checkout (#26444) @eps1lon
+- [test] Don't hoist constant elements (#26448) @eps1lon
+- [test] Fix prop-type warning (#26432) @oliviertassinari
+- [test] Flush scheduled effects before user event returns (#26447) @eps1lon
+- [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon
+- [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon
+- [utils] Convert useId to TypeScript (#26491) @eps1lon
+- [website] Add Material-UI X page (#25794) @DanailH
+- [website] Add open application section (#26501) @oliviertassinari
+- [website] Add Siriwat to team page (#26406) @siriwatknp
+
+All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey
+
 ## 5.0.0-alpha.34
 
 _May 18, 2021_

benchmark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benchmark",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": "true",
   "scripts": {
     "browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js",
@@ -14,9 +14,9 @@
     "@chakra-ui/system": "^1.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@material-ui/core": "5.0.0-alpha.34",
-    "@material-ui/styles": "^5.0.0-alpha.33",
-    "@material-ui/system": "5.0.0-alpha.34",
+    "@material-ui/core": "5.0.0-alpha.35",
+    "@material-ui/styles": "5.0.0-alpha.35",
+    "@material-ui/system": "5.0.0-alpha.35",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.6.1",

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": true,
   "author": "Material-UI Team",
   "license": "MIT",
@@ -30,17 +30,17 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@material-ui/core": "5.0.0-alpha.34",
+    "@material-ui/core": "5.0.0-alpha.35",
     "@material-ui/data-grid": "^4.0.0-alpha.29",
-    "@material-ui/docs": "5.0.0-alpha.34",
-    "@material-ui/icons": "5.0.0-alpha.34",
-    "@material-ui/lab": "5.0.0-alpha.34",
+    "@material-ui/docs": "5.0.0-alpha.35",
+    "@material-ui/icons": "5.0.0-alpha.35",
+    "@material-ui/lab": "5.0.0-alpha.35",
     "@material-ui/styled-engine": "5.0.0-alpha.34",
-    "@material-ui/styled-engine-sc": "5.0.0-alpha.34",
-    "@material-ui/styles": "^5.0.0-alpha.33",
-    "@material-ui/system": "5.0.0-alpha.34",
-    "@material-ui/types": "^6.0.0",
-    "@material-ui/unstyled": "5.0.0-alpha.34",
+    "@material-ui/styled-engine-sc": "5.0.0-alpha.35",
+    "@material-ui/styles": "5.0.0-alpha.35",
+    "@material-ui/system": "5.0.0-alpha.35",
+    "@material-ui/types": "6.0.1",
+    "@material-ui/unstyled": "5.0.0-alpha.35",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/css-mediaquery": "^0.1.0",

framer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Builds Material-UI for Framer X",
   "repository": "https://github.com/mui-org/material-ui",
   "author": "Material-UI Team",
@@ -11,7 +11,7 @@
     "@types/react": "^17.0.0",
     "case": "1.6.3",
     "deepmerge": "^4.0.0",
-    "docs": "5.0.0-alpha.34",
+    "docs": "5.0.0-alpha.35",
     "framer": "^1.2.5",
     "framer-motion": "^4.0.0",
     "mustache": "^4.0.0",

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": true,
   "scripts": {
     "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",

packages/eslint-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-material-ui",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.35",
   "private": true,
   "description": "Custom eslint rules for Material-UI.",
   "main": "src/index.js",

packages/material-ui-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/codemod",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Codemod scripts for Material-UI.",

packages/material-ui-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/docs",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Docs - Documentation building blocks.",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.33",
+    "@material-ui/utils": "5.0.0-alpha.35",
     "nprogress": "^0.2.0"
   },
   "publishConfig": {

packages/material-ui-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/icons",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material Design icons distributed as SVG React components.",

packages/material-ui-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/lab",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Laboratory for new Material-UI modules.",
@@ -68,16 +68,16 @@
     "@date-io/dayjs": "^2.10.6",
     "@date-io/luxon": "^2.10.6",
     "@date-io/moment": "^2.10.6",
-    "@material-ui/system": "5.0.0-alpha.34",
-    "@material-ui/utils": "5.0.0-alpha.33",
+    "@material-ui/system": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.35",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.0",
     "react-transition-group": "^4.4.1",
     "rifm": "^0.12.0"
   },
   "devDependencies": {
-    "@material-ui/types": "6.0.0",
+    "@material-ui/types": "6.0.1",
     "@types/luxon": "^1.25.0",
     "date-fns": "^2.0.0",
     "dayjs": "^1.8.17",

packages/material-ui-private-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/private-theming",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Theming - The React theme context to be shared between `@material-ui/styles` and `@material-ui/core`.",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.33",
+    "@material-ui/utils": "5.0.0-alpha.35",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

packages/material-ui-styled-engine-sc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/styled-engine-sc",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "styled() API wrapper package for styled-components.",

packages/material-ui-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/styles",
-  "version": "5.0.0-alpha.33",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Styles - The styling solution of Material-UI.",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "@emotion/hash": "^0.8.0",
-    "@material-ui/private-theming": "5.0.0-alpha.33",
-    "@material-ui/types": "6.0.0",
-    "@material-ui/utils": "5.0.0-alpha.33",
+    "@material-ui/private-theming": "5.0.0-alpha.35",
+    "@material-ui/types": "6.0.1",
+    "@material-ui/utils": "5.0.0-alpha.35",
     "clsx": "^1.0.4",
     "csstype": "^3.0.2",
     "hoist-non-react-statics": "^3.3.2",

packages/material-ui-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/system",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.35",
   "private": false,
   "author": "Material-UI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -57,8 +57,8 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "@material-ui/styled-engine": "5.0.0-alpha.34",
-    "@material-ui/types": "6.0.0",
-    "@material-ui/utils": "5.0.0-alpha.33",
+    "@material-ui/types": "6.0.1",
+    "@material-ui/utils": "5.0.0-alpha.35",
     "csstype": "^3.0.2",
     "prop-types": "^15.7.2"
   },

packages/material-ui-types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/types",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": false,
   "author": "Material-UI Team",
   "description": "Utility types for Material-UI.",