Require Material-UI v5 alpha (#2053)

mui · Aug 1, 2020 · f8bc7ba · f8bc7ba · vercel · Aug 1, 2020
1 parent ff33683
commit f8bc7ba
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 53 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -21,9 +21,9 @@
     "@date-io/hijri": "^2.6.0",
     "@date-io/jalaali": "^2.6.0",
     "@mapbox/rehype-prism": "^0.4.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.54",
+    "@material-ui/core": "^5.0.0-alpha.5",
+    "@material-ui/icons": "^5.0.0-alpha.4",
+    "@material-ui/lab": "^5.0.0-alpha.5",
     "@material-ui/pickers": "^4.0.0-alpha.1",
     "@now/node": "^1.7.3",
     "@types/fuzzy-search": "^2.1.0",

diff --git a/docs/pages/_error.tsx b/docs/pages/_error.tsx
@@ -23,9 +23,9 @@ class Error extends React.Component<{ statusCode: number }> {
     const { statusCode } = this.props;
 
     return (
-      <CenteredGrid container direction="row" alignItems="center" justify="center">
+      <CenteredGrid container direction="row" alignItems="center" justifyContent="center">
         <NoSsr>
-          <Grid item container xs={12} justify="center">
+          <Grid item container xs={12} justifyContent="center">
             <KawaiiIconWithMargin mood={Math.random() > 0.33 ? 'sad' : 'shocked'} />
           </Grid>
           <Grid item xs={12}>

diff --git a/docs/pages/api/props.tsx b/docs/pages/api/props.tsx
@@ -29,13 +29,13 @@ const Docs: React.FC<WithRouterProps> = ({ router }) => {
   return (
     <React.Fragment>
       <PageMeta title={title} description={description} />
-      <Grid container justify="space-between" alignItems="center">
+      <Grid container justifyContent="space-between" alignItems="center">
         <Grid item md={6} className={classes.title}>
           <h3>{title}</h3>
           <p>{description}</p>
           <Ad />
         </Grid>
-        <Grid item md={6} container alignItems="flex-end" justify="center">
+        <Grid item md={6} container alignItems="flex-end" justifyContent="center">
           <KawaiiIcon className={classes.kawaiiIcon} size={220} />
         </Grid>
       </Grid>

diff --git a/docs/pages/guides/FormikOurValidation.example.tsx b/docs/pages/guides/FormikOurValidation.example.tsx
@@ -93,7 +93,7 @@ export default function FormikExample() {
       {({ values, errors }) => (
         <Form>
           <Grid container>
-            <Grid item container justify="center" xs={12}>
+            <Grid item container justifyContent="center" xs={12}>
               <Field
                 name="date"
                 disablePast

diff --git a/docs/pages/guides/FormikValidationSchema.example.tsx b/docs/pages/guides/FormikValidationSchema.example.tsx
@@ -55,7 +55,7 @@ export default function FormikValidationSchemaExample() {
       {({ values, errors }) => (
         <Form>
           <Grid container>
-            <Grid item container justify="center" xs={12}>
+            <Grid item container justifyContent="center" xs={12}>
               <Field name="date" disablePast component={DatePickerField} />
             </Grid>
             <Grid item xs={12} sm={12} style={{ margin: '24px' }}>

diff --git a/docs/pages/index/Landing.tsx b/docs/pages/index/Landing.tsx
@@ -106,8 +106,8 @@ function Landing() {
         description="Accessible, customizable, delightful date & time pickers for @material-ui/core"
       />
       <Toolbar color="primary" className={classes.appToolbar}>
-        <Grid container justify="space-between" className={classes.landing}>
-          <Grid item container justify="center" md={4} xs={12}>
+        <Grid container justifyContent="space-between" className={classes.landing}>
+          <Grid item container justifyContent="center" md={4} xs={12}>
             <Paper elevation={8} className={classes.logoContainer}>
               <div className={classes.logo}>
                 <Logo />
@@ -139,7 +139,7 @@ function Landing() {
             </Grid>
           </Grid>
         </Grid>
-        <Grid container wrap="wrap" justify="center" className={classes.papersContainer}>
+        <Grid container wrap="wrap" justifyContent="center" className={classes.papersContainer}>
           <Grid item className={classes.paper} md={4} sm={6} xs={12}>
             <LandingProperty
               icon={Code}

diff --git a/docs/pages/regression/Regression.tsx b/docs/pages/regression/Regression.tsx
@@ -41,7 +41,7 @@ function Regression() {
       <Typography align="center" variant="h4" component="span" gutterBottom>
         DatePicker
       </Typography>
-      <Grid container justify="center" wrap="wrap">
+      <Grid container justifyContent="center" wrap="wrap">
         <MobileDatePicker {...makeRenderInputProp({ id: 'basic-datepicker' })} {...sharedProps} />
         <MobileDatePicker
           {...makeRenderInputProp({ id: 'clearable-datepicker' })}
@@ -64,7 +64,7 @@ function Regression() {
       <Typography align="center" variant="h4" component="span" gutterBottom>
         TimePicker
       </Typography>
-      <Grid container justify="center" wrap="wrap">
+      <Grid container justifyContent="center" wrap="wrap">
         <MobileTimePicker
           {...makeRenderInputProp({ id: 'mobile-timepicker' })}
           value={date}

diff --git a/lib/package.json b/lib/package.json
@@ -32,8 +32,8 @@
     "email": "[email protected]"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.10.1",
-    "@material-ui/lab": "^4.0.0-alpha.54",
+    "@material-ui/core": "^5.0.0-alpha.5",
+    "@material-ui/lab": "^5.0.0-alpha.5",
     "@types/react": "^16.8.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
@@ -84,8 +84,9 @@
     "@babel/runtime": "^7.9.6",
     "@cypress/webpack-preprocessor": "^4.1.1",
     "@date-io/core": "^2.8.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/core": "^5.0.0-alpha.5",
+    "@material-ui/icons": "^5.0.0-alpha.4",
+    "@material-ui/lab": "^5.0.0-alpha.5",
     "@rollup/plugin-babel": "^5.0.3",
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-node-resolve": "^8.4.0",

diff --git a/lib/src/__tests__/test-utils.tsx b/lib/src/__tests__/test-utils.tsx
@@ -45,7 +45,12 @@ export function getByMuiTest(...args: Parameters<typeof getAllByMuiTest>): Eleme
 
 export const FakeTransitionComponent = React.forwardRef<HTMLDivElement, TransitionProps>(
   function FakeTransitionComponent({ children }, ref) {
-    return <div ref={ref}>{children}</div>;
+    // set tabIndex in case it is used as a child of <TrapFocus />
+    return (
+      <div ref={ref} tabIndex={-1}>
+        {children}
+      </div>
+    );
   }
 );
 

diff --git a/lib/src/_shared/ArrowSwitcher.tsx b/lib/src/_shared/ArrowSwitcher.tsx
@@ -62,7 +62,7 @@ export const useStyles = makeStyles(
   { name: 'MuiPickersArrowSwitcher' }
 );
 
-const PureArrowSwitcher: React.FC<ArrowSwitcherProps> = (props) => {
+const PureArrowSwitcher = React.forwardRef<HTMLDivElement, ArrowSwitcherProps>((props, ref) => {
   const {
     className,
     isLeftDisabled,
@@ -85,7 +85,7 @@ const PureArrowSwitcher: React.FC<ArrowSwitcherProps> = (props) => {
   const isRtl = theme.direction === 'rtl';
 
   return (
-    <div className={clsx(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} ref={ref} {...other}>
       <IconButton
         data-mui-test="previous-arrow-button"
         size="small"
@@ -120,7 +120,7 @@ const PureArrowSwitcher: React.FC<ArrowSwitcherProps> = (props) => {
       </IconButton>
     </div>
   );
-};
+});
 
 PureArrowSwitcher.displayName = 'ArrowSwitcher';
 

diff --git a/lib/src/_shared/PickerToolbar.tsx b/lib/src/_shared/PickerToolbar.tsx
@@ -85,7 +85,7 @@ const PickerToolbar: React.SFC<PickerToolbarProps> = ({
       </Typography>
       <Grid
         container
-        justify="space-between"
+        justifyContent="space-between"
         className={classes.dateTitleContainer}
         direction={isLandscape ? landscapeDirection : 'row'}
         alignItems={isLandscape ? 'flex-start' : 'flex-end'}

diff --git a/yarn.lock b/yarn.lock
@@ -1606,16 +1606,16 @@
     refractor "^2.3.0"
     unist-util-visit "^1.1.3"
 
-"@material-ui/core@^4.11.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a"
-  integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==
+"@material-ui/core@^5.0.0-alpha.5":
+  version "5.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-5.0.0-alpha.5.tgz#eb7fb1a41431167450323fdde6f96bfe195815e5"
+  integrity sha512-2yErP3Y7TjBWB/LiE5/ruE5rznktTyxelM/dMAaFBRexN8Y4RW/v9TNKjNvSvzNgIMp8ocQH/ilkx7mHm6FYVA==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.10.0"
-    "@material-ui/system" "^4.9.14"
+    "@material-ui/styles" "^5.0.0-alpha.1"
+    "@material-ui/system" "^5.0.0-alpha.1"
     "@material-ui/types" "^5.1.0"
-    "@material-ui/utils" "^4.10.2"
+    "@material-ui/utils" "^5.0.0-alpha.1"
     "@types/react-transition-group" "^4.2.0"
     clsx "^1.0.4"
     hoist-non-react-statics "^3.3.2"
@@ -1624,33 +1624,33 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
-"@material-ui/icons@^4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
-  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+"@material-ui/icons@^5.0.0-alpha.4":
+  version "5.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-5.0.0-alpha.4.tgz#edaa333b9612f5a02669fcec6b4af1ab91c31402"
+  integrity sha512-AE1nn/cYBNZ9FSihUMLb2c39HwdUpGXF3S1v7no68NtwOLjUorWshJJ/0i//cLgwvVEieRKI2XJpZjg6Ze/xNA==
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/lab@^4.0.0-alpha.54":
-  version "4.0.0-alpha.55"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.55.tgz#82a850dc59654e04ee3a31be1b34eb3bf64d5585"
-  integrity sha512-mPHiS52Z1AT6NlWNp07xxTkoKGU3DZhoGdVtLKGy2+uMH5t4/UPtiZLRab7hR3hvuHvguxgV4tkBC9ww3xqUzA==
+"@material-ui/lab@^5.0.0-alpha.5":
+  version "5.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-5.0.0-alpha.5.tgz#41a4ca63482bf2e72c1985f324893efb768ce8c3"
+  integrity sha512-2ufKb2pekKSj4o0pce7L0nRRYN1hL8IQnfjPcoCIE5xVOEX/aqLxOofbHssYO7fNh8dbrgJLkFe5mN6KyB1ZqA==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.9.6"
+    "@material-ui/utils" "^5.0.0-alpha.1"
     clsx "^1.0.4"
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
-"@material-ui/styles@^4.10.0":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
-  integrity sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==
+"@material-ui/styles@^5.0.0-alpha.1":
+  version "5.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-5.0.0-alpha.5.tgz#c904dcab09f010d47aa3aa42b7fea8630d3f554b"
+  integrity sha512-9fyHX/DHCbg93q/rxSN3jgE91h0M1sLecefkxNMmVFYskiQvkZXOogGQ5cm1Ec6KuOVPa1VZB4I8D3m7/AyE8A==
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@emotion/hash" "^0.8.0"
     "@material-ui/types" "^5.1.0"
-    "@material-ui/utils" "^4.9.6"
+    "@material-ui/utils" "^5.0.0-alpha.1"
     clsx "^1.0.4"
     csstype "^2.5.2"
     hoist-non-react-statics "^3.3.2"
@@ -1664,13 +1664,13 @@
     jss-plugin-vendor-prefixer "^10.0.3"
     prop-types "^15.7.2"
 
-"@material-ui/system@^4.9.14":
-  version "4.9.14"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.14.tgz#4b00c48b569340cefb2036d0596b93ac6c587a5f"
-  integrity sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==
+"@material-ui/system@^5.0.0-alpha.1":
+  version "5.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-5.0.0-alpha.1.tgz#83980bb8bcb7e20ce1db744ed471f93529786f5e"
+  integrity sha512-6wbmqGdN/j407rp1HXMzMG/DH83vclG05mWmP3/J/6PBH4jZp1/mNqRgHNljl8NEJK+vRXQmAccXK8aRBeelHQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.9.6"
+    "@material-ui/utils" "^5.0.0-alpha.1"
     csstype "^2.5.2"
     prop-types "^15.7.2"
 
@@ -1679,10 +1679,10 @@
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
 
-"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.9.6":
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.10.2.tgz#3fd5470ca61b7341f1e0468ac8f29a70bf6df321"
-  integrity sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==
+"@material-ui/utils@^5.0.0-alpha.1":
+  version "5.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-alpha.1.tgz#6835345d3e4a5dcbf2f96d3512502dceba8d4771"
+  integrity sha512-FxkoLR/KA2133Oy1v/JLoTp/euui/xQXiBoybaBm2qWbKNzaJLM1d7KikA/9f1/y+cbSXiQUWYnQ3MtVddoHeQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
     prop-types "^15.7.2"