Better recognition of touch devices (#1653)

* Change breakpoint when desktop mode will be enabled for ResponsiveWrapper

* Use media hover to better determine touch devices

* Fix incorrect type

* Use real touch device for pickers visual regression

* Change touch device media to (hover: fine)

* Remove unused import

Author: dmtrKovalenko

docs/prop-types.json

@@ -12,7 +12,7 @@ describe('Visual Regression', () => {
     {
       url: '/demo/datepicker',
       name: 'DatePicker demo',
-      hardResponsive: true,
+      withRealTouchDevice: true,
       withDarkTheme: true,
       scenarios: {
         'Opened datepicker': () => {
@@ -26,7 +26,7 @@ describe('Visual Regression', () => {
     {
       url: '/demo/timepicker',
       name: 'TimePicker demo',
-      responsive: true,
+      withRealTouchDevice: true,
       withDarkTheme: true,
       scenarios: {
         'Opened timepicker': () => {
@@ -40,7 +40,7 @@ describe('Visual Regression', () => {
     {
       url: '/demo/datetime-picker',
       name: 'DateTimePicker demo',
-      responsive: true,
+      withRealTouchDevice: true,
       withDarkTheme: true,
       scenarios: {
         'Opened datetimepicker': () => {
@@ -88,7 +88,7 @@ describe('Visual Regression', () => {
       }
 
       if (page.scenarios) {
-        const defaultWidthForScenarios = page.hardResponsive ? [1280] : [1280, 375];
+        const defaultWidthForScenarios = page.withRealTouchDevice ? [1280] : [1280, 375];
 
         Object.entries(page.scenarios).forEach(([name, execute]) => {
           if (!execute || typeof execute !== 'function') {
@@ -101,7 +101,7 @@ describe('Visual Regression', () => {
               cy.percySnapshot(`${page.name}: ${name}`, { widths: defaultWidthForScenarios });
             });
 
-            if (page.hardResponsive) {
+            if (page.withRealTouchDevice) {
               it(`${page.name} scenario: ${name} on mobile`, () => {
                 cy.viewport('iphone-x');
 
@@ -119,7 +119,7 @@ describe('Visual Regression', () => {
               });
             }
 
-            if (page.withDarkTheme && page.hardResponsive) {
+            if (page.withDarkTheme && page.withRealTouchDevice) {
               it(`${page.name} scenario: ${name} on mobile in dark theme`, () => {
                 cy.viewport('iphone-x');
                 cy.toggleTheme();

e2e/integration/VisualRegression.spec.ts

@@ -7,10 +7,10 @@ import { parsePickerInputValue } from '../_helpers/date-utils';
 import { usePickerState } from '../_shared/hooks/usePickerState';
 import { AllSharedPickerProps } from '../Picker/SharedPickerProps';
 import { DateRange as DateRangeType, RangeInput } from './RangeTypes';
-import { ResponsivePopperWrapper } from '../wrappers/ResponsiveWrapper';
 import { DesktopPopperWrapper } from '../wrappers/DesktopPopperWrapper';
 import { MuiPickersAdapter, useUtils } from '../_shared/hooks/useUtils';
 import { makeWrapperComponent } from '../wrappers/makeWrapperComponent';
+import { ResponsivePopperWrapper } from '../wrappers/ResponsiveWrapper';
 import { SomeWrapper, ExtendWrapper, StaticWrapper } from '../wrappers/Wrapper';
 import { DateRangePickerView, ExportedDateRangePickerViewProps } from './DateRangePickerView';
 import { DateRangePickerInput, ExportedDateRangePickerInputProps } from './DateRangePickerInput';

lib/src/DateRangePicker/DateRangePicker.tsx

@@ -20,7 +20,7 @@ describe('e2e - DatePicker default year format', () => {
       <DatePicker
         DialogProps={{}}
         PopoverProps={{}}
-        desktopModeBreakpoint="xs"
+        desktopModeMediaQuery="(min-width:720px)"
         value={utilsToUse.date('2018-01-01T00:00:00.000')}
         onChange={onChangeMock}
         views={['year']}

lib/src/__tests__/DatePicker.test.tsx

@@ -7,3 +7,5 @@ export const VIEW_HEIGHT = 358;
 export const DAY_SIZE = 36;
 
 export const DAY_MARGIN = 2;
+
+export const IS_TOUCH_DEVICE_MEDIA = '@media (pointer: fine)';

lib/src/constants/dimensions.ts

@@ -11,6 +11,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { InnerMobileWrapperProps } from './MobileWrapper';
 import { InnerDesktopWrapperProps } from './DesktopWrapper';
 import { WrapperVariantContext } from './WrapperVariantContext';
+import { IS_TOUCH_DEVICE_MEDIA } from '../constants/dimensions';
 import { KeyboardDateInput } from '../_shared/KeyboardDateInput';
 import { useGlobalKeyDown, keycode } from '../_shared/hooks/useKeyDown';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
@@ -36,7 +37,7 @@ const useStyles = makeStyles(theme => ({
     transformOrigin: 'top center',
     '&:focus': {
       outline: 'auto',
-      '@media (pointer:coarse)': {
+      [IS_TOUCH_DEVICE_MEDIA]: {
         outline: 0,
       },
     },

lib/src/wrappers/DesktopPopperWrapper.tsx

@@ -7,6 +7,7 @@ import { StaticWrapperProps } from './StaticWrapper';
 import { makeStyles } from '@material-ui/core/styles';
 import { InnerMobileWrapperProps } from './MobileWrapper';
 import { WrapperVariantContext } from './WrapperVariantContext';
+import { IS_TOUCH_DEVICE_MEDIA } from '../constants/dimensions';
 import { InnerDesktopPopperWrapperProps } from './DesktopPopperWrapper';
 
 export interface InnerDesktopWrapperProps {
@@ -23,7 +24,7 @@ const useStyles = makeStyles({
   popover: {
     '&:focus': {
       outline: 'auto',
-      '@media (pointer:coarse)': {
+      [IS_TOUCH_DEVICE_MEDIA]: {
         outline: 0,
       },
     },

lib/src/wrappers/DesktopWrapper.tsx

@@ -1,27 +1,27 @@
 import * as React from 'react';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { useTheme } from '@material-ui/core/styles';
+import { IS_TOUCH_DEVICE_MEDIA } from '../constants/dimensions';
 import { MobileWrapperProps, MobileWrapper } from './MobileWrapper';
 import { DesktopWrapperProps, DesktopWrapper } from './DesktopWrapper';
-import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 import { DesktopPopperWrapperProps, DesktopPopperWrapper } from './DesktopPopperWrapper';
 
 export interface ResponsiveWrapperProps
   extends DesktopWrapperProps,
     DesktopPopperWrapperProps,
     MobileWrapperProps {
-  /** Breakpoint when `Desktop` mode will be changed to `Mobile`
-   * @default 'md'
+  /** Css media query when `Mobile` mode will be changed to `Desktop`
+   * @default "@media (pointer: fine)"
+   * @example "@media (min-width: 720px)" or theme.breakpoints.up("sm")
    */
-  desktopModeBreakpoint?: Breakpoint;
+  desktopModeMediaQuery?: string;
 }
 
 export const makeResponsiveWrapper = (
   DesktopWrapperComponent: React.FC<DesktopWrapperProps | DesktopPopperWrapperProps>,
   MobileWrapperComponent: React.FC<MobileWrapperProps>
 ) => {
   const ResponsiveWrapper: React.FC<ResponsiveWrapperProps> = ({
-    desktopModeBreakpoint = 'md',
+    desktopModeMediaQuery = IS_TOUCH_DEVICE_MEDIA,
     okLabel,
     cancelLabel,
     clearLabel,
@@ -35,8 +35,7 @@ export const makeResponsiveWrapper = (
     displayStaticWrapperAs,
     ...other
   }) => {
-    const theme = useTheme();
-    const isDesktop = useMediaQuery(theme.breakpoints.up(desktopModeBreakpoint));
+    const isDesktop = useMediaQuery(desktopModeMediaQuery);
 
     return isDesktop ? (
       <DesktopWrapperComponent