Make DialogTrigger use screen width to determine if mobile or not

packages/@react-aria/aria-modal-polyfill/test/index.test.js

@@ -15,29 +15,27 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Item, Menu, MenuTrigger, Section} from '@react-spectrum/menu';
-import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import {watchModals} from '../';
 
 describe('watchModals', () => {
-  let matchMedia;
   beforeAll(() => {
     jest.useFakeTimers('legacy');
   });
+
   afterAll(() => {
     jest.useRealTimers();
+    jest.clearAllMocks();
   });
 
   beforeEach(() => {
-    matchMedia = new MatchMediaMock();
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
   });
 
   afterEach(() => {
     jest.runAllTimers();
-    matchMedia.clear();
     window.requestAnimationFrame.mockRestore();
   });
 
@@ -227,7 +225,7 @@ describe('watchModals', () => {
       ]}
     ];
     // menu should be a tray
-    matchMedia.useMediaQuery('(max-width: 700px)');
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
     watchModals();
     let {getByLabelText, getByRole, queryByRole} = render(
       <>

packages/@react-aria/selection/test/useSelectableCollection.test.js

@@ -84,7 +84,7 @@ describe('useSelectableCollection', () => {
   `('always uses toggle for $type', ({prepare, actions: [start, end]}) => {
     prepare();
     it('uses toggle mode when the interaction is touch', () => {
-      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 600);
+      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
       let {getAllByRole} = render(
         <List selectionMode="multiple" selectionBehavior="replace">
           <Item>Paco de Lucia</Item>

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -1409,7 +1409,7 @@ describe('SearchAutocomplete', function () {
 
   describe('mobile searchAutocomplete', function () {
     beforeEach(() => {
-      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 600);
+      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
     });
 
     afterEach(() => {

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -3600,7 +3600,7 @@ describe('ComboBox', function () {
 
   describe('mobile combobox', function () {
     beforeEach(() => {
-      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 600);
+      jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
     });
 
     afterEach(() => {

packages/@react-spectrum/contextualhelp/test/ContextualHelp.test.js

@@ -21,6 +21,7 @@ import {theme} from '@react-spectrum/theme-default';
 describe('ContextualHelp', function () {
   beforeAll(() => {
     jest.useFakeTimers();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
   });
   afterAll(() => {
     jest.clearAllMocks();

packages/@react-spectrum/datepicker/test/DatePickerBase.test.js

@@ -40,6 +40,14 @@ function render(el) {
 }
 
 describe('DatePickerBase', function () {
+  beforeAll(() => {
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
   describe('basics', function () {
     it.each`
       Name                   | Component            | numSegments

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -16,7 +16,7 @@ import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overla
 import {PressResponder} from '@react-aria/interactions';
 import React, {Fragment, ReactElement, useEffect, useRef} from 'react';
 import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
-import {useMediaQuery} from '@react-spectrum/utils';
+import {useIsMobileDevice} from '@react-spectrum/utils';
 import {useOverlayTrigger} from '@react-aria/overlays';
 
 function DialogTrigger(props: SpectrumDialogTriggerProps) {
@@ -37,8 +37,7 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
   let [trigger, content] = children as [ReactElement, SpectrumDialogClose];
 
   // On small devices, show a modal or tray instead of a popover.
-  // TODO: DNA variable?
-  let isMobile = useMediaQuery('(max-width: 700px)');
+  let isMobile = useIsMobileDevice();
   if (isMobile) {
     // handle cases where desktop popovers need a close button for the mobile modal view
     if (type !== 'modal' && mobileType === 'modal') {

packages/@react-spectrum/dialog/test/DialogTrigger.test.js

@@ -17,7 +17,6 @@ import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '../';
 import {Heading} from '@react-spectrum/text';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
-import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {TextField} from '@react-spectrum/textfield';
@@ -26,10 +25,9 @@ import userEvent from '@testing-library/user-event';
 
 
 describe('DialogTrigger', function () {
-  let matchMedia;
   let warnMock;
+  let windowSpy;
   beforeAll(() => {
-    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
     jest.useFakeTimers('legacy');
   });
   afterAll(() => {
@@ -38,7 +36,7 @@ describe('DialogTrigger', function () {
   });
 
   beforeEach(() => {
-    matchMedia = new MatchMediaMock();
+    windowSpy = jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
     // this needs to be a setTimeout so that the dialog can be removed from the dom before the callback is invoked
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => setTimeout(() => cb(), 0));
     if (process.env.STRICT_MODE) {
@@ -57,7 +55,6 @@ describe('DialogTrigger', function () {
       });
     }
 
-    matchMedia.clear();
     window.requestAnimationFrame.mockRestore();
 
     if (process.env.STRICT_MODE && warnMock.mock.calls.length > 0) {
@@ -187,7 +184,7 @@ describe('DialogTrigger', function () {
   });
 
   it('should trigger a modal instead of a popover on mobile', function () {
-    matchMedia.useMediaQuery('(max-width: 700px)');
+    windowSpy.mockImplementation(() => 700);
     let {getByRole, queryByRole, getByTestId} = render(
       <Provider theme={theme}>
         <DialogTrigger type="popover">
@@ -214,7 +211,7 @@ describe('DialogTrigger', function () {
   });
 
   it('should trigger a tray instead of a popover on mobile if mobileType="tray"', function () {
-    matchMedia.useMediaQuery('(max-width: 700px)');
+    windowSpy.mockImplementation(() => 700);
     let {getByRole, queryByRole, getByTestId} = render(
       <Provider theme={theme}>
         <DialogTrigger type="popover" mobileType="tray">
@@ -696,7 +693,7 @@ describe('DialogTrigger', function () {
   });
 
   it('mobile type modals should be closable by clicking outside the modal', async function () {
-    matchMedia.useMediaQuery('(max-width: 700px)');
+    windowSpy.mockImplementation(() => 700);
     function Test({defaultOpen, onOpenChange}) {
       return (
         <Provider theme={theme}>

packages/@react-spectrum/form/test/Form.test.js

@@ -16,7 +16,6 @@ import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
-import MatchMediaMock from 'jest-matchmedia-mock';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {render, triggerPress} from '@react-spectrum/test-utils';
@@ -26,13 +25,13 @@ import userEvent from '@testing-library/user-event';
 import {within} from '@testing-library/dom';
 
 describe('Form', function () {
-  let matchMedia;
   beforeAll(() => {
     jest.useFakeTimers();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 700);
   });
 
-  beforeEach(() => {
-    matchMedia = new MatchMediaMock();
+  afterAll(() => {
+    jest.clearAllMocks();
   });
 
   it('should render a form', () => {
@@ -199,8 +198,6 @@ describe('Form', function () {
     });
 
     it('contextual help should not be disabled nor should its dismiss button be disabled', () => {
-      matchMedia.useMediaQuery('(max-width: 700px)');
-
       let {getByRole, getByLabelText} = render(
         <Provider theme={theme}>
           <Form aria-label="Test" isDisabled>