Merge pull request mui#982 from dmtrKovalenko/v3-breaking-changes

v3 breaking changes

.circleci/config.yml

@@ -95,7 +95,6 @@ workflows:
           build: 'yarn workspace docs build'
           start: 'yarn workspace docs start'
           wait-on: 'http://localhost:3000'
-          browser: chrome
           record: true
           yarn: true
           cache-key: yarn-packages-{{ checksum "yarn.lock" }}

docs/layout/Layout.tsx

@@ -31,6 +31,7 @@ interface LayoutProps extends WithRouterProps, WithStyles<typeof styles, true> {
 
 const styles = (theme: Theme) =>
   createStyles({
+    // @ts-ignore
     '@global': createOverrides(theme),
     flex: {
       flex: 1,

docs/layout/components/NavigationMenu.jsx → docs/layout/components/NavigationMenu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { List } from '@material-ui/core';
 import NavItem from './NavItem';
+import { List } from '@material-ui/core';
 
 const navItems = [
   {
@@ -39,16 +38,16 @@ const navItems = [
         href: '/guides/controlling-programmatically',
       },
       { title: 'Static picker`s components', href: '/guides/static-components' },
+      { title: 'Updating to v3', href: '/guides/upgrading-to-v3' },
     ],
   },
 ];
 
-class NavigationMenu extends React.Component {
-  mapNavigation(depth) {
-    return ({ title, children, href }) => {
-      const { location } = this.props;
+class NavigationMenu extends React.Component<any> {
+  mapNavigation(depth: number) {
+    return ({ title, children, href }: any) => {
       const open =
-        children && children.length > 0 ? children.some(item => item.href === true) : false;
+        children && children.length > 0 ? children.some((item: any) => item.href === true) : false;
 
       return (
         <NavItem key={href || title} title={title} depth={depth} href={href} open={open}>

docs/pages/guides/upgrading-to-v3.mdx

@@ -0,0 +1,117 @@
+import Ad from '_shared/Ad'
+
+## Upgrading to v3
+
+Version `v3` for material-ui-pickers coming with whole bunch of breaking changes. This is a guide of how-to update :)
+<Ad />
+
+#### ⬇️ Install
+Right now it's possible to install the prerelease version by
+
+```
+npm i material-ui-pickers@next @material-ui/core@next @material-ui/styles
+
+yarn add material-ui-pickers@next @material-ui/core@next @material-ui/styles
+```
+
+**Note**: it's required also to update your `@material-ui/core` version to `@next` and install `@material-ui/styles`
+
+
+#### 🌚 Imports
+There are a lot of changes in imports. From now on we are not providing `keyboard` prop on the pickers.
+Keyboard mode comes with separate components like `<KeyboardDatePicker />`.
+Thus you will be sure that keyboard-specific logic will be correctly tree-shaked.
+
+```diff
+- import { DatePicker } from 'material-ui-pickers'
++ import { KeyboardDatePicker } from 'material-ui-pickers'
+
+- <DatePicker keyboard />
++ <KeyboardDatePicker />
+```
+
+Also there are no more wrapper-specific components, like `InlineDatePicker`. Use `variant` prop instead.
+
+```diff
+- import { InlineDatePicker } from 'material-ui-pickers'
++ import { DatePicker } from 'material-ui-pickers'
+
+- <InlineDatePicker />
++ <DatePicker variant="inline" />
+```
+
+#### 💪 State management
+
+We done a lot of work to make state-management of pickers more obviuos in `v3` and simplify form integration experience.
+From now there is *no hidden internal state* under the hood. Your components are truly controlled.
+
+That means that now `onChange` will be called on **each** particular day-click or keystroke.
+So if you are doing some heavy operations in `onChange` (e.g. xhr requests, dom mutations or redirects) -
+please move them to the `onAccept`. This callback will be fired only when user actually accepts the date.
+
+```diff
+<DatePicker
++ onChange={setDate} // stateLogic
++ onAccept={requestSomeDataFromServer} // async action
+- onChange={(newDate) => {
+-   setDate(newDate)
+-   requestSomeDataFromServer(newDate)
+- }}
+/>
+```
+
+#### ⌨ Keyboard mode
+
+Previously keyboard mode was a bit painful, especially from form integration prospective.
+That's why we recreated it from scratch.
+Now `onChange` prop for `<Keyboard(Date|Time)Picker />` has different signature from the pure pickers:
+
+```ts
+type KeybordOnChange = (date: MaterialUiPickersDate | null, value: string | undefined) => void;
+```
+
+It is even possible to control keyboard pickers by pure string. ⚠️ `value` prop will work as well ⚠️
+
+```jsx
+function KeyboardString() {
+  const [value, setValue] = useState('01/01/2019')
+
+  return (
+    <KeyboardDatePicker
+      format="MM/dd/yyyy"
+      inputValue={value}
+      onChange={(_, newValue) => setValue(newValue)}
+    />
+  )
+}
+```
+
+Also we completely replaced [react-text-mask](https://www.npmjs.com/package/react-text-mask) with [rifm](https://github.com/istarkov/rifm).
+That saved us several kbs of bundlesize, improved performance
+
+##### 🎉 And now no more need in mask prop 🎉
+
+Mask will be generated and applied automatically from the `format` passed.
+So please, make sure that your formats are easy to input from keyboard.
+And it is still possible to fully customize mask, checkout [this](/api/timepicker#keyboard-input) example.
+
+
+```diff
+<KeyboardDatePicker
+  format="dd/MM/yyyy"
+- mask={[/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/]}
+/>
+```
+
+#### 🚪 Controlling open/close state
+
+`ref` approach to customize open/close state was replaced with `open` props and `onClose`, `onOpen` callbacks.
+Check out [new example](/guides/controlling-programmatically)
+
+
+#### 🙈 Misc
+- Improved accessibility by making toolbar button actually focusable `<button />`
+- Remove `withUtils` hoc, and provide `useUtils` hoc
+- Remove `BasePicker` hoc, and provide `usePickerState` and `useKeyboardPickerState` hooks
+- Remove `openToYearSelection` prop in favor of `openTo`
+- Remove exported `MuiPickersContextConsumer` in favor of `useUtils` hook

docs/utils/prism.ts

@@ -2,9 +2,10 @@ import prism from 'prismjs';
 import { ThemeType } from '../layout/PageWithContext';
 
 import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-typescript';
 
-export type AvailableLanguages = 'jsx' | 'typescript' | 'markup' | 'json';
+export type AvailableLanguages = 'jsx' | 'typescript' | 'markup' | 'json' | 'diff';
 export const prismThemes = {
   light: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css',
   dark: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css',

lib/.size-snapshot.json

@@ -1,15 +1,15 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 111220,
-    "minified": 65499,
-    "gzipped": 15393,
+    "bundled": 110782,
+    "minified": 65197,
+    "gzipped": 15335,
     "treeshaked": {
       "rollup": {
-        "code": 51194,
-        "import_statements": 1444
+        "code": 50971,
+        "import_statements": 1395
       },
       "webpack": {
-        "code": 58359
+        "code": 58215
       }
     }
   },

lib/package.json

@@ -35,8 +35,8 @@
     "@material-ui/core": "^4.0.0-alpha.7",
     "@material-ui/styles": "^4.0.0-alpha.7",
     "prop-types": "^15.6.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "dependencies": {
     "clsx": "^1.0.2",

lib/src/DatePicker/DatePickerRoot.tsx

@@ -63,23 +63,16 @@ export class DatePickerRoot extends React.PureComponent<DatePickerRootProps> {
   public static propTypes: any = {
     views: PropTypes.arrayOf(DomainPropTypes.datePickerView),
     openTo: DomainPropTypes.datePickerView,
-    openToYearSelection: PropTypes.bool,
   };
 
   public static defaultProps = {
-    openToYearSelection: false,
     minDate: new Date('1900-01-01'),
     maxDate: new Date('2100-01-01'),
     views: ['year', 'day'] as DatePickerViewType[],
   };
 
   public state: DatePickerState = {
-    // TODO in v3 remove openToYearSelection
-    openView: this.props.openTo
-      ? this.props.openTo
-      : this.props.openToYearSelection
-      ? 'year'
-      : this.props.views![this.props.views!.length - 1],
+    openView: this.props.openTo || this.props.views![this.props.views!.length - 1],
   };
 
   get date() {

lib/src/MuiPickersUtilsProvider.tsx

@@ -4,8 +4,6 @@ import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from './typings/date';
 
 export const MuiPickersContext = React.createContext<IUtils<MaterialUiPickersDate> | null>(null);
-// TODO remove in v3.0
-export const MuiPickersContextConsumer = MuiPickersContext.Consumer;
 
 export interface MuiPickersUtilsProviderProps {
   utils: any;

lib/src/__tests__/e2e/DatePickerRoot.test.tsx

@@ -136,7 +136,7 @@ describe('e2e -- DatePickerRoot views year and month open from year', () => {
         date={utilsToUse.date('2018-01-01T00:00:00.000Z')}
         onChange={onChangeMock}
         views={['year', 'month']}
-        openToYearSelection
+        openTo="year"
       />
     );
   });

lib/src/index.ts

@@ -37,10 +37,10 @@ export { default as TimePickerView } from './TimePicker/components/TimePickerVie
 
 export { default as Clock } from './TimePicker/components/Clock';
 
+export { useUtils } from './_shared/hooks/useUtils';
+
 export { usePickerState } from './_shared/hooks/usePickerState';
 
-export {
-  default as MuiPickersUtilsProvider,
-  MuiPickersContext,
-  MuiPickersContextConsumer,
-} from './MuiPickersUtilsProvider';
+export { useKeyboardPickerState } from './_shared/hooks/useKeyboardPickerState';
+
+export { default as MuiPickersUtilsProvider, MuiPickersContext } from './MuiPickersUtilsProvider';

package.json

@@ -61,7 +61,7 @@
     "videos/"
   ],
   "dependencies": {
-    "cypress": "^3.1.4",
+    "cypress": "^3.2.0",
     "wait-on": "^3.2.0"
   }
 }