From 48cd17a66f5bf3dbdc79735c8eb66a64f3037c62 Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sun, 9 Jun 2019 11:02:34 +0300
Subject: [PATCH] Inner state for picker modal (#1095)

* Use inner state for displayed date in calendar

* Make inline pickers controlled by default

* Fix tests

* Fix deadlock on rendering with usePickerState

* Fix crashing on utils change

* Fix not applying keydown listener, closes #1090

* Update packages 08.06.2019 (#1096)

* Update packages 08.06.2019

* Fix prettier
---
 docs/_shared/Example.tsx                      |   7 +-
 docs/_shared/UtilsServiceContext.tsx          |   2 +-
 .../pages/guides/StaticComponents.example.jsx |   1 -
 lib/src/Picker/WrappedKeyboardPicker.tsx      |   6 +-
 lib/src/Picker/WrappedPurePicker.tsx          |   2 +-
 .../__tests__/DatePicker/Calendar.test.tsx    |  36 ---
 lib/src/__tests__/e2e/DatePickerRoot.test.tsx |   9 +-
 .../__tests__/e2e/DateTimePickerRoot.test.tsx |  16 +-
 lib/src/__tests__/e2e/TimePicker.test.tsx     |  40 ++--
 lib/src/__tests__/e2e/commands.tsx            |   8 +
 lib/src/_shared/WithUtils.tsx                 |   2 +-
 lib/src/_shared/hooks/useKeyDown.ts           |   2 +-
 .../_shared/hooks/useKeyboardPickerState.ts   |   6 +-
 lib/src/_shared/hooks/useOpenState.ts         |  30 +++
 lib/src/_shared/hooks/usePickerState.ts       | 118 ++++------
 lib/src/typings/BasePicker.tsx                |   2 +
 yarn.lock                                     | 218 ++++++++++--------
 17 files changed, 247 insertions(+), 258 deletions(-)
 create mode 100644 lib/src/__tests__/e2e/commands.tsx
 create mode 100644 lib/src/_shared/hooks/useOpenState.ts

diff --git a/docs/_shared/Example.tsx b/docs/_shared/Example.tsx
index 77f490dad..d766e124f 100644
--- a/docs/_shared/Example.tsx
+++ b/docs/_shared/Example.tsx
@@ -5,6 +5,7 @@ import GithubIcon from '_shared/svgIcons/GithubIcon';
 import React, { useState, useCallback, useMemo, useContext } from 'react';
 import { copy } from 'utils/helpers';
 import { GITHUB_EDIT_URL } from '_constants';
+import { useUtils } from '@material-ui/pickers';
 import { replaceGetFormatStrings } from 'utils/utilsService';
 import { withSnackbar, InjectedNotistackProps } from 'notistack';
 import { withUtilsService, UtilsContext } from './UtilsServiceContext';
@@ -66,6 +67,7 @@ function Example({ source, enqueueSnackbar }: Props) {
     );
   }
 
+  const utils = useUtils();
   const classes = useStyles();
   const currentLib = useContext(UtilsContext).lib;
   const [expanded, setExpanded] = useState(false);
@@ -121,7 +123,10 @@ function Example({ source, enqueueSnackbar }: Props) {
           </IconButton>
         </Tooltip>
 
-        <Component />
+        <Component
+          // remount component when utils changed
+          key={utils.constructor.name}
+        />
       </div>
     </>
   );
diff --git a/docs/_shared/UtilsServiceContext.tsx b/docs/_shared/UtilsServiceContext.tsx
index c1913010d..92ed21e57 100644
--- a/docs/_shared/UtilsServiceContext.tsx
+++ b/docs/_shared/UtilsServiceContext.tsx
@@ -7,7 +7,7 @@ export const UtilsContext = React.createContext<UtilsService>(createUtilsService
 export const withUtilsService = <P extends UtilsService>(Component: React.ComponentType<P>) => {
   const withUtilsService: React.SFC<Omit<P, keyof UtilsService>> = props => (
     <UtilsContext.Consumer>
-      {service => <Component {...service} {...props as any} />}
+      {service => <Component {...service} {...(props as any)} />}
     </UtilsContext.Consumer>
   );
 
diff --git a/docs/pages/guides/StaticComponents.example.jsx b/docs/pages/guides/StaticComponents.example.jsx
index 3798fa942..521a342fb 100644
--- a/docs/pages/guides/StaticComponents.example.jsx
+++ b/docs/pages/guides/StaticComponents.example.jsx
@@ -9,7 +9,6 @@ function StaticPickers() {
     { value, onChange: handleDateChange },
     {
       getDefaultFormat: () => 'MM/dd/yyyy',
-      getValidationError: () => null,
     }
   );
 
diff --git a/lib/src/Picker/WrappedKeyboardPicker.tsx b/lib/src/Picker/WrappedKeyboardPicker.tsx
index 5d000a63a..e64dd7408 100644
--- a/lib/src/Picker/WrappedKeyboardPicker.tsx
+++ b/lib/src/Picker/WrappedKeyboardPicker.tsx
@@ -13,15 +13,17 @@ export type WrappedKeyboardPickerProps = DateValidationProps &
   BaseKeyboardPickerProps &
   ExtendWrapper<KeyboardDateInputProps>;
 
-export interface MakePickerOptions<T> {
+export interface MakePickerOptions {
   useOptions: (props: any) => StateHookOptions;
   ToolbarComponent: React.ComponentType<ToolbarComponentProps>;
 }
 
+// Mostly duplicate of ./WrappedPurePicker.tsx to enable tree-shaking of keyboard logic
+// TODO investigate how to reduce duplications
 export function makeKeyboardPicker<T extends any>({
   useOptions,
   ToolbarComponent,
-}: MakePickerOptions<T>): React.FC<WrappedKeyboardPickerProps & T> {
+}: MakePickerOptions): React.FC<WrappedKeyboardPickerProps & T> {
   function WrappedKeyboardPicker(props: WrappedKeyboardPickerProps & T) {
     const {
       allowKeyboardControl,
diff --git a/lib/src/Picker/WrappedPurePicker.tsx b/lib/src/Picker/WrappedPurePicker.tsx
index 0c52f53d7..ad2af46e8 100644
--- a/lib/src/Picker/WrappedPurePicker.tsx
+++ b/lib/src/Picker/WrappedPurePicker.tsx
@@ -14,7 +14,7 @@ export type WrappedPurePickerProps = DateValidationProps &
 export function makePurePicker<T extends any>({
   useOptions,
   ToolbarComponent,
-}: MakePickerOptions<T>): React.FC<WrappedPurePickerProps & T> {
+}: MakePickerOptions): React.FC<WrappedPurePickerProps & T> {
   function WrappedPurePicker(props: WrappedPurePickerProps & T) {
     const {
       allowKeyboardControl,
diff --git a/lib/src/__tests__/DatePicker/Calendar.test.tsx b/lib/src/__tests__/DatePicker/Calendar.test.tsx
index 50b4bd9cd..9b5238970 100644
--- a/lib/src/__tests__/DatePicker/Calendar.test.tsx
+++ b/lib/src/__tests__/DatePicker/Calendar.test.tsx
@@ -49,39 +49,3 @@ describe('Calendar - disabled selected date on mount', () => {
     expect(onChange).toHaveBeenCalledWith(utilsToUse.date('01-01-2018'), false);
   });
 });
-
-describe('Calendar - pop and push loading queue', () => {
-  let component: ShallowWrapper<any, any, any>;
-
-  beforeEach(() => {
-    component = shallowRender(props => (
-      <Calendar
-        date={utilsToUse.date('01-01-2017')}
-        minDate={new Date('01-01-2018')}
-        onChange={jest.fn()}
-        utils={utilsToUse}
-        {...props}
-      />
-    ));
-  });
-
-  it('Push two times to loading queue', () => {
-    (component.instance() as Calendar).pushToLoadingQueue();
-    (component.instance() as Calendar).pushToLoadingQueue();
-
-    expect(component.state('loadingQueue')).toEqual(2);
-  });
-
-  it('Pop from empty loading queue', () => {
-    (component.instance() as Calendar).popFromLoadingQueue();
-
-    expect(component.state('loadingQueue')).toEqual(0);
-  });
-
-  it('Push and pop loading queue', () => {
-    (component.instance() as Calendar).pushToLoadingQueue();
-    (component.instance() as Calendar).popFromLoadingQueue();
-
-    expect(component.state('loadingQueue')).toEqual(0);
-  });
-});
diff --git a/lib/src/__tests__/e2e/DatePickerRoot.test.tsx b/lib/src/__tests__/e2e/DatePickerRoot.test.tsx
index 7b1b5555e..496f83e28 100644
--- a/lib/src/__tests__/e2e/DatePickerRoot.test.tsx
+++ b/lib/src/__tests__/e2e/DatePickerRoot.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ReactWrapper } from 'enzyme';
+import { clickOKButton } from './commands';
 import { mount, utilsToUse } from '../test-utils';
 import { DatePicker, DatePickerProps } from '../../DatePicker';
 
@@ -12,6 +13,7 @@ describe('e2e - DatePicker', () => {
     component = mount(
       <DatePicker
         open
+        autoOk
         openTo="date"
         animateYearScrolling={false}
         value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
@@ -48,6 +50,8 @@ describe('e2e - DatePicker', () => {
       .find('Year')
       .at(1)
       .simulate('click');
+
+    clickOKButton(component);
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
@@ -78,7 +82,7 @@ describe('e2e -- DatePicker views year', () => {
       .at(1)
       .simulate('click');
 
-    expect(onChangeMock).toHaveBeenCalled();
+    clickOKButton(component);
     expect(onYearChangeMock).toHaveBeenCalled();
   });
 });
@@ -93,6 +97,7 @@ describe('e2e -- DatePicker views year and month', () => {
     component = mount(
       <DatePicker
         open
+        autoOk
         value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
         onChange={onChangeMock}
         onMonthChange={onMonthChangeMock}
@@ -109,7 +114,6 @@ describe('e2e -- DatePicker views year and month', () => {
       .first()
       .simulate('click');
 
-    expect(onChangeMock).toHaveBeenCalled();
     expect(onMonthChangeMock).toHaveBeenCalled();
   });
 
@@ -135,6 +139,7 @@ describe('e2e -- DatePicker views year and month open from year', () => {
     component = mount(
       <DatePicker
         open
+        autoOk
         value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
         onChange={onChangeMock}
         views={['year', 'month']}
diff --git a/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx b/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx
index cb5540465..6ef673e8b 100644
--- a/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx
+++ b/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactWrapper } from 'enzyme';
-import { mount, utilsToUse } from '../test-utils';
+import { clickOKButton } from './commands';
+import { mount, utilsToUse, toHaveBeenCalledExceptMoment } from '../test-utils';
 import { DateTimePicker, DateTimePickerProps } from '../../DateTimePicker/DateTimePicker';
 
 describe('e2e - DateTimePicker', () => {
@@ -27,18 +28,19 @@ describe('e2e - DateTimePicker', () => {
     expect(component).toBeTruthy();
   });
 
-  it('Should render year selection', () => {
+  it('Should display year view', () => {
     component
       .find('ToolbarButton')
       .first()
       .simulate('click');
 
     expect(component.find('Year').length).toBe(201);
-
     component
       .find('Year')
       .at(1)
       .simulate('click');
+
+    clickOKButton(component);
     expect(onChangeMock).toHaveBeenCalled();
   });
 
@@ -64,11 +66,7 @@ describe('e2e - DateTimePicker', () => {
       .at(5)
       .simulate('click');
 
-    if (process.env.UTILS === 'moment') {
-      expect(onChangeMock).toHaveBeenCalled();
-      return;
-    }
-
-    expect(onChangeMock).toHaveBeenCalledWith(utilsToUse.date('2018-01-01T12:00:00.000Z'));
+    clickOKButton(component);
+    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000Z')]);
   });
 });
diff --git a/lib/src/__tests__/e2e/TimePicker.test.tsx b/lib/src/__tests__/e2e/TimePicker.test.tsx
index 2cc41848e..9915699b8 100644
--- a/lib/src/__tests__/e2e/TimePicker.test.tsx
+++ b/lib/src/__tests__/e2e/TimePicker.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ReactWrapper } from 'enzyme';
+import { clickOKButton } from './commands';
 import { TimePicker, TimePickerProps } from '../../TimePicker/TimePicker';
 import { mount, utilsToUse, toHaveBeenCalledExceptMoment } from '../test-utils';
 
@@ -28,24 +29,20 @@ describe('e2e - TimePicker', () => {
 
   it('Should submit onChange on moving', () => {
     component.find('Clock div[role="menu"]').simulate('mouseMove', fakeTouchEvent);
-
-    expect(onChangeMock).toHaveBeenCalled();
-  });
-
-  it('Should submit hourview (mouse move)', () => {
-    component
-      .find('WithStyles(ToolbarButton)')
-      .at(1)
-      .simulate('click');
     component.find('Clock div[role="menu"]').simulate('mouseUp', fakeTouchEvent);
 
-    expect(onChangeMock).toHaveBeenCalled();
+    expect(
+      component
+        .find('WithStyles(ToolbarButton)')
+        .at(0)
+        .text()
+    ).toBe('11');
   });
 
   it('Should change minutes (touch)', () => {
     component
       .find('WithStyles(ToolbarButton)')
-      .at(2)
+      .at(1)
       .simulate('click');
 
     component.find('Clock div[role="menu"]').simulate('touchMove', {
@@ -58,19 +55,12 @@ describe('e2e - TimePicker', () => {
       ],
     });
 
-    expect(onChangeMock).toHaveBeenCalled();
-
-    component.find('Clock div[role="menu"]').simulate('touchEnd', {
-      buttons: 1,
-      changedTouches: [
-        {
-          clientX: 20,
-          clientY: 15,
-        },
-      ],
-    });
-
-    expect(onChangeMock).toHaveBeenCalled();
+    expect(
+      component
+        .find('WithStyles(ToolbarButton)')
+        .at(1)
+        .text()
+    ).toBe('53');
   });
 
   it('Should change meridiem mode', () => {
@@ -79,6 +69,7 @@ describe('e2e - TimePicker', () => {
       .at(3)
       .simulate('click');
 
+    clickOKButton(component);
     toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000')]);
   });
 });
@@ -124,6 +115,7 @@ describe('e2e - TimePicker with seconds', () => {
       ],
     });
 
+    clickOKButton(component);
     toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T00:00:53.000')]);
   });
 });
diff --git a/lib/src/__tests__/e2e/commands.tsx b/lib/src/__tests__/e2e/commands.tsx
new file mode 100644
index 000000000..e48478656
--- /dev/null
+++ b/lib/src/__tests__/e2e/commands.tsx
@@ -0,0 +1,8 @@
+import { ReactWrapper } from 'enzyme';
+
+export const clickOKButton = (component: ReactWrapper<any>) => {
+  component
+    .find('ForwardRef(DialogActions) WithStyles(ForwardRef(Button))')
+    .at(1)
+    .simulate('click');
+};
diff --git a/lib/src/_shared/WithUtils.tsx b/lib/src/_shared/WithUtils.tsx
index 238aa463b..288321a2c 100644
--- a/lib/src/_shared/WithUtils.tsx
+++ b/lib/src/_shared/WithUtils.tsx
@@ -11,7 +11,7 @@ export interface WithUtilsProps {
 export const withUtils = () => <P extends WithUtilsProps>(Component: React.ComponentType<P>) => {
   const WithUtils: React.SFC<Omit<P, keyof WithUtilsProps>> = props => {
     const utils = useUtils();
-    return <Component utils={utils} {...props as any} />;
+    return <Component utils={utils} {...(props as any)} />;
   };
 
   WithUtils.displayName = `WithUtils(${Component.displayName || Component.name})`;
diff --git a/lib/src/_shared/hooks/useKeyDown.ts b/lib/src/_shared/hooks/useKeyDown.ts
index 20f9a9bc0..df17316ee 100644
--- a/lib/src/_shared/hooks/useKeyDown.ts
+++ b/lib/src/_shared/hooks/useKeyDown.ts
@@ -29,5 +29,5 @@ export function useKeyDown(active: boolean, keyHandlers: KeyHandlers) {
         window.removeEventListener('keydown', handleKeyDown);
       };
     }
-  }, [active]);
+  }, [active, keyHandlers]);
 }
diff --git a/lib/src/_shared/hooks/useKeyboardPickerState.ts b/lib/src/_shared/hooks/useKeyboardPickerState.ts
index 32ddd93de..65953c36f 100644
--- a/lib/src/_shared/hooks/useKeyboardPickerState.ts
+++ b/lib/src/_shared/hooks/useKeyboardPickerState.ts
@@ -40,7 +40,7 @@ export function useKeyboardPickerState(props: BaseKeyboardPickerProps, options:
     }
   }, [format, props, props.value, utils]);
 
-  function handleChange(date: MaterialUiPickersDate) {
+  function handleKeyboardChange(date: MaterialUiPickersDate) {
     const dateString = date === null ? null : utils.format(date, format);
 
     props.onChange(date, dateString);
@@ -48,13 +48,13 @@ export function useKeyboardPickerState(props: BaseKeyboardPickerProps, options:
 
   const { inputProps: innerInputProps, wrapperProps, pickerProps } = usePickerState(
     // Extend props interface
-    { ...props, value: dateValue, onChange: handleChange },
+    { ...props, value: dateValue, onChange: handleKeyboardChange },
     options
   );
 
   const inputProps = useMemo(
     () => ({
-      ...innerInputProps,
+      ...innerInputProps, // reuse validation and open/close logic
       format: wrapperProps.format,
       inputValue: props.inputValue || innerInputValue,
       onChange: (value: string) => {
diff --git a/lib/src/_shared/hooks/useOpenState.ts b/lib/src/_shared/hooks/useOpenState.ts
new file mode 100644
index 000000000..b67cfe02a
--- /dev/null
+++ b/lib/src/_shared/hooks/useOpenState.ts
@@ -0,0 +1,30 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useCallback, useState } from 'react';
+import { BasePickerProps } from '../../typings/BasePicker';
+
+function makeControlledOpenProps(props: BasePickerProps) {
+  return {
+    isOpen: props.open!,
+    setIsOpen: (newIsOpen: boolean) => {
+      return newIsOpen ? props.onOpen && props.onOpen() : props.onClose && props.onClose();
+    },
+  };
+}
+
+export function useOpenState(props: BasePickerProps) {
+  if (props.open !== undefined && props.open !== null) {
+    return makeControlledOpenProps(props);
+  }
+
+  const [isOpen, setIsOpenState] = useState(false);
+  // prettier-ignore
+  const setIsOpen = useCallback((newIsOpen: boolean) => {
+    setIsOpenState(newIsOpen);
+
+    return newIsOpen
+      ? props.onOpen && props.onOpen()
+      : props.onClose && props.onClose();
+  }, [props]);
+
+  return { isOpen, setIsOpen };
+}
diff --git a/lib/src/_shared/hooks/usePickerState.ts b/lib/src/_shared/hooks/usePickerState.ts
index 987eadd8e..838e8cc61 100644
--- a/lib/src/_shared/hooks/usePickerState.ts
+++ b/lib/src/_shared/hooks/usePickerState.ts
@@ -2,13 +2,13 @@ import { useMemo } from 'react';
 import { useUtils } from './useUtils';
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from '../..';
+import { useOpenState } from './useOpenState';
 import { BasePickerProps } from '../../typings/BasePicker';
+import { useCallback, useDebugValue, useEffect, useState } from 'react';
 import { getDisplayDate, validate } from '../../_helpers/text-field-helper';
-import { useCallback, useDebugValue, useEffect, useRef, useState } from 'react';
 
 export interface StateHookOptions {
   getDefaultFormat: () => string;
-  getValidationError?: () => React.ReactNode;
 }
 
 const valueToDate = (
@@ -24,112 +24,82 @@ const valueToDate = (
 function useDateValues(props: BasePickerProps, options: StateHookOptions) {
   const utils = useUtils();
   const date = valueToDate(utils, props);
-  const acceptedDateRef = useRef(date);
   const format = props.format || options.getDefaultFormat();
 
-  return { acceptedDateRef, date, format };
+  return { date, format };
 }
 
-function makeControlledOpenProps(props: BasePickerProps) {
-  return {
-    isOpen: props.open!,
-    setIsOpen: (newIsOpen: boolean) => {
-      return newIsOpen ? props.onOpen && props.onOpen() : props.onClose && props.onClose();
-    },
-  };
-}
-
-/* eslint-disable react-hooks/rules-of-hooks */
-function useOpenState(props: BasePickerProps) {
-  if (props.open !== undefined && props.open !== null) {
-    return makeControlledOpenProps(props);
-  }
-
-  const [isOpen, setIsOpenState] = useState(false);
-  // prettier-ignore
-  const setIsOpen = useCallback((newIsOpen: boolean) => {
-    setIsOpenState(newIsOpen);
-
-    return newIsOpen
-      ? props.onOpen && props.onOpen()
-      : props.onClose && props.onClose()
-  }, [props]);
-
-  return { isOpen, setIsOpen };
-}
-/* eslint-enable react-hooks/rules-of-hooks */
-
 export function usePickerState(props: BasePickerProps, options: StateHookOptions) {
   const utils = useUtils();
   const { isOpen, setIsOpen } = useOpenState(props);
-  const { acceptedDateRef, date, format } = useDateValues(props, options);
+  const { date, format } = useDateValues(props, options);
+  const [pickerDate, setPickerDate] = useState(date);
 
-  if (!isOpen) {
-    // if value was changed in closed state treat it as accepted
-    acceptedDateRef.current = date;
-  }
-
-  const validationError = validate(props.value, utils, props);
   useEffect(() => {
-    if (validationError && props.onError) {
-      props.onError(validationError, props.value);
+    // if value was changed in closed state - treat it as accepted
+    if (!isOpen && !utils.isEqual(pickerDate, date)) {
+      setPickerDate(date);
     }
-  }, [props, validationError]);
-
-  const inputProps = useMemo(
-    () => ({
-      validationError,
-      onClick: () => !props.disabled && setIsOpen(true),
-      inputValue: getDisplayDate(
-        acceptedDateRef.current,
-        format,
-        utils,
-        props.value === null,
-        props
-      ),
-    }),
-    [acceptedDateRef, format, props, setIsOpen, utils, validationError]
-  );
+  }, [date, isOpen, pickerDate, utils]);
 
-  // prettier-ignore
-  const acceptDate = useCallback((acceptedDate: MaterialUiPickersDate) => {
-    acceptedDateRef.current = acceptedDate;
+  const acceptDate = useCallback(
+    (acceptedDate: MaterialUiPickersDate) => {
+      setIsOpen(false);
+      props.onChange(acceptedDate);
 
-    setIsOpen(false);
-    props.onChange(acceptedDate);
-
-    if (props.onAccept) {
-      props.onAccept(acceptedDate);
-    }
-  }, [acceptedDateRef, setIsOpen, props]);
+      if (props.onAccept) {
+        props.onAccept(acceptedDate);
+      }
+    },
+    [setIsOpen, props]
+  );
 
   const wrapperProps = useMemo(
     () => ({
       format,
       open: isOpen,
-      onAccept: () => acceptDate(date),
+      onAccept: () => acceptDate(pickerDate),
       onClear: () => acceptDate(null),
       onSetToday: () => props.onChange(utils.date()),
       onDismiss: () => {
         setIsOpen(false);
-        props.onChange(acceptedDateRef.current);
       },
     }),
-    [acceptDate, acceptedDateRef, date, format, isOpen, props, setIsOpen, utils]
+    [acceptDate, format, isOpen, pickerDate, props, setIsOpen, utils]
   );
 
   const pickerProps = useMemo(
     () => ({
-      date,
+      date: pickerDate,
       onChange: (newDate: MaterialUiPickersDate, isFinish = true) => {
-        props.onChange(newDate);
+        setPickerDate(newDate);
+
+        if (props.variant === 'inline') {
+          props.onChange(newDate);
+        }
 
         if (isFinish && props.autoOk) {
           acceptDate(newDate);
         }
       },
     }),
-    [acceptDate, date, props]
+    [acceptDate, pickerDate, props]
+  );
+
+  const validationError = validate(props.value, utils, props);
+  useEffect(() => {
+    if (validationError && props.onError) {
+      props.onError(validationError, props.value);
+    }
+  }, [props, validationError]);
+
+  const inputProps = useMemo(
+    () => ({
+      validationError,
+      onClick: () => !props.disabled && setIsOpen(true),
+      inputValue: getDisplayDate(date, format, utils, props.value === null, props),
+    }),
+    [date, format, props, setIsOpen, utils, validationError]
   );
 
   const pickerState = { pickerProps, inputProps, wrapperProps };
diff --git a/lib/src/typings/BasePicker.tsx b/lib/src/typings/BasePicker.tsx
index 089504576..0f3f1b36e 100644
--- a/lib/src/typings/BasePicker.tsx
+++ b/lib/src/typings/BasePicker.tsx
@@ -1,4 +1,5 @@
 import { MaterialUiPickersDate } from './date';
+import { WrapperVariant } from '../wrappers/Wrapper';
 import { ParsableDate } from '../constants/prop-types';
 
 export interface BasePickerProps {
@@ -44,6 +45,7 @@ export interface BasePickerProps {
    * @default false
    */
   disableToolbar?: boolean;
+  variant?: WrapperVariant;
   mergePreviousDateOnChange?: boolean;
   forwardedRef?: any;
 }
diff --git a/yarn.lock b/yarn.lock
index 3e476e4d6..229234be6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1061,24 +1061,24 @@
     unist-util-visit "^1.1.3"
 
 "@material-ui/core@^4.0.0", "@material-ui/core@^4.0.0-beta.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.0.1.tgz#7fe3bcb1a89b01376b181358a5ded58291da0016"
-  integrity sha512-cw2Qs3BLem8FOrp/knfjJkwJXG4dZO/HGyWwZV71UWiqDIOF3plHZ7duCbOMIWwKgSUJ85k9omlSHUTT63E/pw==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.0.2.tgz#c7a07c1d1b13b94adf479d7267b51cb682fcb279"
+  integrity sha512-k7o95UIupTp14lsO9hejmswuPZsmWUafOBNaptHN+Pv8CBp/vW+hD6peuThgUpeGesrCuL2/yTpHB/9JkO9rNg==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@material-ui/styles" "^4.0.1"
-    "@material-ui/system" "^4.0.1"
+    "@material-ui/styles" "^4.0.2"
+    "@material-ui/system" "^4.0.2"
     "@material-ui/types" "^4.0.1"
     "@material-ui/utils" "^4.0.1"
     "@types/react-transition-group" "^2.0.16"
     clsx "^1.0.2"
-    convert-css-length "^1.0.2"
+    convert-css-length "^2.0.0"
     csstype "^2.5.2"
     debounce "^1.1.0"
     deepmerge "^3.0.0"
     hoist-non-react-statics "^3.2.1"
-    is-plain-object "^2.0.4"
-    normalize-scroll-left "^0.1.2"
+    is-plain-object "^3.0.0"
+    normalize-scroll-left "^0.2.0"
     popper.js "^1.14.1"
     prop-types "^15.7.2"
     react-event-listener "^0.6.6"
@@ -1093,10 +1093,10 @@
     "@babel/runtime" "^7.2.0"
     recompose "0.28.0 - 0.30.0"
 
-"@material-ui/styles@^4.0.0", "@material-ui/styles@^4.0.0-alpha.7", "@material-ui/styles@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.0.1.tgz#67e880d490f010c9f2956c572b07d218bfa255d7"
-  integrity sha512-SywkWzBzXvm9dUY2rtmzTc/FTlKGctVYGb8hzPZyHU3OI4X9jQH4YnR/OiqTwg4jNpFnASJX5rW1rEUJM+ZnhA==
+"@material-ui/styles@^4.0.0", "@material-ui/styles@^4.0.0-alpha.7", "@material-ui/styles@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.0.2.tgz#05805b26bfcd876f883b098e4be50d813b1c5fde"
+  integrity sha512-RUM+2G++2X4M6cbZ/K/PzAdxdSdqIU4zhZ82YYIcEz/OgCx72HC68+VrYxoy7nEjZ9E6R+9JmPPS7CO8O1oPmw==
   dependencies:
     "@babel/runtime" "^7.2.0"
     "@emotion/hash" "^0.7.1"
@@ -1116,10 +1116,10 @@
     prop-types "^15.7.2"
     warning "^4.0.1"
 
-"@material-ui/system@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.0.1.tgz#d78969f3dd9eb6baf82ded0ef183368d8befb00b"
-  integrity sha512-NlMF4jZk1xx7taUOT+QhrJw7v7uUi9Ae+G8C8fowGgP5x04whxOuSuSmN9a8u2j7dc8XqahR0OJeA6Xch8ymog==
+"@material-ui/system@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.0.2.tgz#224a75b4168994cb2e903849cc1d608e3cc327f1"
+  integrity sha512-gpLYcDycJjK8tvWI9ZKrVLdGjFQ/YJM74TvhIMkP5ML453ZtPuFzMLt6FVEKp8okWxFEgYXVBNNSB4IF3Yig8g==
   dependencies:
     "@babel/runtime" "^7.2.0"
     deepmerge "^3.0.0"
@@ -1369,15 +1369,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*":
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
-  integrity sha512-j8YL2C0fXq7IONwl/Ud5Kt0PeXw22zGERt+HSSnwbKOJVsAGkEz3sFCYwaF9IOuoG1HOtE0vKCj6sXF7Q0+Vaw==
-
-"@types/node@^11.13.9":
-  version "11.13.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.10.tgz#4df59e5966b56f512bac98898bcbee5067411f0f"
-  integrity sha512-leUNzbFTMX94TWaIKz8N15Chu55F9QSH+INKayQr5xpkasBQBRF3qQXfo3/dOnMU/dEIit+Y/SU8HyOjq++GwA==
+"@types/node@*", "@types/node@^12.0.3":
+  version "12.0.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.7.tgz#4f2563bad652b2acb1722d7e7aae2b0ff62d192c"
+  integrity sha512-1YKeT4JitGgE4SOzyB9eMwO0nGVNkNEsm9qlIt1Lqm/tG2QEiSMTD4kS3aO6L+w5SClLVxALmIBESK6Mk5wX0A==
 
 "@types/prettier@^1.16.0":
   version "1.16.4"
@@ -1432,9 +1427,9 @@
     "@types/webpack" "*"
 
 "@types/react-transition-group@^2.0.15", "@types/react-transition-group@^2.0.16":
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.1.tgz#66c9ca5d0b20bae72fe6b797e0d362b996d55e9f"
-  integrity sha512-1usq4DRUVBFnxc9KGJAlJO9EpQrLZGDDEC8wDOn2+2ODSyudYo8FiIzPDRaX/hfQjHqGeeoNaNdA2bj0l35hZQ==
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
+  integrity sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==
   dependencies:
     "@types/react" "*"
 
@@ -2885,12 +2880,12 @@ check-types@^7.3.0:
   integrity sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==
 
 cheerio@^1.0.0-rc.2:
-  version "1.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
-  integrity sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=
+  version "1.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
+  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
   dependencies:
     css-select "~1.2.0"
-    dom-serializer "~0.1.0"
+    dom-serializer "~0.1.1"
     entities "~1.1.1"
     htmlparser2 "^3.9.1"
     lodash "^4.15.0"
@@ -3231,10 +3226,10 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-css-length@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-1.0.2.tgz#32f38a8ac55d78372ff43562532564366c871ccc"
-  integrity sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==
+convert-css-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.0.tgz#0c60ff686e70625ef7f3fd305a2f61f33a96c289"
+  integrity sha512-ygBgHNzImHJ/kjgqdzC0oaY2+EMID3s88/CZD2C9O1stM3PwsOwXzzlFTTkZy/bPZe0wjyt1UoYjilfunQGjlw==
   dependencies:
     console-polyfill "^0.1.2"
     parse-unit "^1.0.1"
@@ -3691,9 +3686,9 @@ date-fns@^1.27.2:
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
 date-fns@^2.0.0-alpha.27:
-  version "2.0.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
-  integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
+  version "2.0.0-alpha.31"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.31.tgz#51bcfdca25dfc9bea334a556ab33dfc0bb00421c"
+  integrity sha512-S19PwMqnbYsqcbCg02Yj9gv4veVNZ0OX7v2+zcd+Mq0RI7LoDKJipJjnMrTZ3Cc6blDuTce5G/pHXcVIGRwJWQ==
 
 date-now@^0.1.4:
   version "0.1.4"
@@ -3923,7 +3918,7 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-dom-serializer@0, dom-serializer@~0.1.0:
+dom-serializer@0, dom-serializer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
   integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
@@ -4105,9 +4100,9 @@ entities@^1.1.1, entities@~1.1.1:
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
 enzyme-adapter-react-16@^1.9.1:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.13.2.tgz#8a574d7cbbef7ef0cab2022e9bfc12aeaebb7ae5"
-  integrity sha512-h0neTuAAFfQUgEZ+PPHVIMDFJ9+CGafI8AjojNlSVh4Fd1pLDgtl2OeVkm4yKF7RSgzrPAwugq4JW8Jjo2iRJA==
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz#204722b769172bcf096cb250d33e6795c1f1858f"
+  integrity sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==
   dependencies:
     enzyme-adapter-utils "^1.12.0"
     has "^1.0.3"
@@ -4131,9 +4126,9 @@ enzyme-adapter-utils@^1.12.0:
     semver "^5.6.0"
 
 enzyme@^3.8.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.9.0.tgz#2b491f06ca966eb56b6510068c7894a7e0be3909"
-  integrity sha512-JqxI2BRFHbmiP7/UFqvsjxTirWoM1HfeaJrmVSZ9a1EADKkZgdPcAuISPMpoUiHlac9J4dYt81MC5BBIrbJGMg==
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
+  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
   dependencies:
     array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
@@ -5308,9 +5303,9 @@ html-comment-regex@^1.1.0:
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
 html-element-map@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.0.tgz#19a41940225153ecdfead74f8509154ff1cdc18b"
-  integrity sha512-/SP6aOiM5Ai9zALvCxDubIeez0LvG3qP7R9GcRDnJEP/HBmv0A8A9K0o8+HFudcFt46+i921ANjzKsjPjb7Enw==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.1.tgz#3c4fcb4874ebddfe4283b51c8994e7713782b592"
+  integrity sha512-BZSfdEm6n706/lBfXKWa4frZRZcT5k1cOusw95ijZsHlI+GdgY0v95h6IzO3iIDf2ROwq570YTwqNPqHcNMozw==
   dependencies:
     array-filter "^1.0.0"
 
@@ -5869,6 +5864,13 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
+  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
+  dependencies:
+    isobject "^4.0.0"
+
 is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
@@ -5981,6 +5983,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isobject@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+  integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
+
 isomorphic-fetch@^2.1.1, isomorphic-fetch@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -6630,63 +6637,63 @@ jss-nested@^6.0.1:
     warning "^3.0.0"
 
 jss-plugin-camel-case@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.16.tgz#36023c9aa35fd2e898f117be136f31dfa76ffef9"
-  integrity sha512-nki+smHEsFyoZ0OlOYtaxVqcQA0ZHVJCE1slRnk+1TklbmxbBiO4TwITMTEaNIDv0U0Uyb0Z8wVgFgRwCCIFog==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.17.tgz#6f7c9d9742e349bb061e53cd9b1c3cb006169a67"
+  integrity sha512-aPY4kr6MwliH7KToLRzeSk1NxXUo9n7MQsAa0Hghwj01x9UnMkDkGAKENMKUtPjGkQZfiJpB9tTLFrSJ/6VrIQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
     hyphenate-style-name "^1.0.3"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-plugin-default-unit@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.16.tgz#ef96b529fcb9f8d730c14a489a1d7e71e243447e"
-  integrity sha512-jjGW4F/r9yKvoyUk22M8nWhdMfvoWzJw/oFO2cDRXCk2onnWFiRALfqeUsEDyocwdZbyVF9WhZbSHn4GL03kSw==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.17.tgz#4e3bf6d8e9691a8e05d50b5abf300515eb0f67ee"
+  integrity sha512-KQgiXczvzJ9AlFdD8NS7FZLub0NSctSrCA9Yi/GqdsfJg4ZCriU4DzIybCZBHCi/INFGJmLIESYWSxnuhAzgSQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-plugin-global@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.16.tgz#6da34ad63e0a4669a35412d716d39820bd10ede4"
-  integrity sha512-B1mm2ZF9OEsWPmzkG5ZUXqV88smDqpc4unILLXhWVuj0U5JeT0DNitH+QbXFrSueDJzkWVfvqyckvWDR/0qeDg==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.17.tgz#13005f6b963aee3c1498fe2bad767967ad2eb838"
+  integrity sha512-WYxiwwI+CLk0ozW8loeceqXBAZXBMsLBEZeRwVf9WX+FljdJkGwVZpRCk6LBX4aXnqAGyKqCxIAIJ3KP2yBdEg==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-plugin-nested@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.16.tgz#282ce431cc6c7c4b2e2509b80dc5cc1de7f7102f"
-  integrity sha512-3l/MB6COnIpq4GOXQFae6UydoaIPa81UxhuBTEQuiAojgTeUla9L7nB3h18Q4zAhQQpjxaEsyppAKuEzIP7kPQ==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.17.tgz#cb1c20cdc81558c164eaa333bbb24c88bef12202"
+  integrity sha512-onpFqv904KCujryf2t6IIV1/QoB7cSF7ojrd4UujcN5TPvYOvXF5bchi7jnHG5U0SLlRSDGMLJ9fhtoCknhEbw==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
     tiny-warning "^1.0.2"
 
 jss-plugin-props-sort@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.16.tgz#d91566d6c73ebd906ff81fdfb93135d16bbfb067"
-  integrity sha512-+Yn9nugHAH58nf/d43H2uxMvlCFPDgLKRSmKO4Q4m1IGYjMbHsWt1Rk2HfC9IiCanqcqpc8hstwtzf+HG7PWFQ==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.17.tgz#a49be72b8dc8e2861f8136661c53d130abb07ccd"
+  integrity sha512-KnbyrxCbtQTqpDx2mSZU/r/E5QnDPIVfIxRi8K+W/q4gZpomBvqWC+xgvAk9hbpmA6QBoQaOilV8o12w2IZ6fg==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-plugin-rule-value-function@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.16.tgz#42bf684dae0a73a02df0a3297b747becf9854449"
-  integrity sha512-MQap9ne6ZGZH0NlpSQTMSm6QalBTF0hYpd2uaGQwam+GlT7IKeO+sTjd46I1WgO3kyOmwb0pIY6CnuLQGXKtSA==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.17.tgz#45617ccc2d695d77287554e7dbe3b9c37f5f5af4"
+  integrity sha512-8AuJB44Q+ehfkWVRi2XlRbUf6SrLmrHTa5EXd6dgQRCCRuvGmqX8Dl4fZvNeKRFjTLPZgzg9+31rqeOMhKa2vA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-plugin-vendor-prefixer@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.16.tgz#f59d92db7331d6615b33aa108ee54cbf1ab6ce84"
-  integrity sha512-70yJ6QE5dN8VlPUGKld5jK2SKyrteheEL/ismexpybIufunMs6iJgkhDndbOfv8ia13yZgUVqeakMdhRKYwK1A==
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.17.tgz#7bb05076d1a14d20b567231c36e57ebf6cb6625f"
+  integrity sha512-wDq9EL0QaoMGSGifPEBb+/SA9LBcqPEW0jpL9ht+Z2t+lV7NNz0j7uCEOuE6FvNWqHzUKTsiATs1rTHPkzNBEQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
     css-vendor "^2.0.1"
-    jss "10.0.0-alpha.16"
+    jss "10.0.0-alpha.17"
 
 jss-preset-default@^4.3.0:
   version "4.5.0"
@@ -6730,10 +6737,10 @@ jss-vendor-prefixer@^7.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@10.0.0-alpha.16, jss@^10.0.0-alpha.16:
-  version "10.0.0-alpha.16"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.16.tgz#0555e8b667e08dbd2cc94f6125be5a8b8b022833"
-  integrity sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg==
+jss@10.0.0-alpha.17, jss@^10.0.0-alpha.16:
+  version "10.0.0-alpha.17"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.17.tgz#3057c85a846c3bd207c04aafd91c8277955d9c57"
+  integrity sha512-egGIUg+YRu0+U+XXlD0gmVtU/gW5sn7+qmDv7opwK5s8emZBE/VoN55X6CaMrAa0kLeGMldnI43KOWea6M9/mA==
   dependencies:
     "@babel/runtime" "^7.3.1"
     is-in-browser "^1.1.3"
@@ -7826,10 +7833,10 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-normalize-scroll-left@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz#6b79691ba79eb5fb107fa5edfbdc06b55caee2aa"
-  integrity sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==
+normalize-scroll-left@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c"
+  integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==
 
 normalize-url@^3.0.0:
   version "3.3.0"
@@ -8831,9 +8838,9 @@ prelude-ls@~1.1.2:
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
 prettier@^1.14.3:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
-  integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
+  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
 
 pretty-format@^23.6.0:
   version "23.6.0"
@@ -9260,9 +9267,9 @@ read-pkg@^4.0.1:
     util-deprecate "~1.0.1"
 
 readable-stream@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.1.1.tgz#ed6bbc6c5ba58b090039ff18ce670515795aeb06"
-  integrity sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
   dependencies:
     inherits "^2.0.3"
     string_decoder "^1.1.1"
@@ -9596,10 +9603,10 @@ resolve@1.x, resolve@^1.4.0, resolve@^1.8.1:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.10.0, resolve@^1.3.2:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
-  integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
+resolve@^1.10.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
+  integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
   dependencies:
     path-parse "^1.0.6"
 
@@ -9610,6 +9617,13 @@ resolve@^1.10.1:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.3.2:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
+  integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -9682,9 +9696,9 @@ rollup-plugin-commonjs@^9.2.0:
     rollup-pluginutils "^2.6.0"
 
 rollup-plugin-node-resolve@^4.0.1:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.3.tgz#638a373a54287d19fcc088fdd1c6fd8a58e4d90a"
-  integrity sha512-r+WaesPzdGEynpLZLALFEDugA4ACa5zn7bc/+LVX4vAXQQ8IgDHv0xfsSvJ8tDXUtprfBtrDtRFg27ifKjcJTg==
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.4.tgz#7d370f8d6fd3031006a0032c38262dd9be3c6250"
+  integrity sha512-t/64I6l7fZ9BxqD3XlX4ZeO6+5RLKyfpwE2CiPNUKa+GocPlQhf/C208ou8y3AwtNsc6bjSk/8/6y/YAyxCIvw==
   dependencies:
     "@types/resolve" "0.0.8"
     builtin-modules "^3.1.0"
@@ -9750,12 +9764,12 @@ rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0:
     micromatch "^3.1.10"
 
 rollup@^1.1.2:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.11.3.tgz#6f436db2a2d6b63f808bf60ad01a177643dedb81"
-  integrity sha512-81MR7alHcFKxgWzGfG7jSdv+JQxSOIOD/Fa3iNUmpzbd7p+V19e1l9uffqT8/7YAHgGOzmoPGN3Fx3L2ptOf5g==
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.14.4.tgz#f9af78f142e8c5851e3392bda488df489181ac60"
+  integrity sha512-sR5/cqbQUg72Lm2TZgjzI3/Q1V7osP/PXlqNpSLCMSTnSg8xQ9ECFQSNEG1OOjKzPMqboEqeayRyYzi+IfkDgQ==
   dependencies:
     "@types/estree" "0.0.39"
-    "@types/node" "^11.13.9"
+    "@types/node" "^12.0.3"
     acorn "^6.1.1"
 
 rst-selector-parser@^2.2.3: