Dialog Trigger should correctly determine mobile device

[michayou]

🐛 Bug Report

If you have a thin window, the dialog trigger is determining if it is a mobile device even though it might not be. it needs to use useIsMobileDevice to make the right call.

🤔 Expected Behavior

ok, very specifically, if I click to open a calendar on the date range builder, it forces it into a tray on a thin window even if the window is not on a mobile device. it should not do that and behave as if it was on a non-windowed device.

😯 Current Behavior

ok, very specifically, if I click to open a calendar on the date range builder, it forces it into a tray on a thin window even if the window is not on a mobile device. it should not do that and behave as if it was on a non-windowed device.

💁 Possible Solution

DialogTrigger should use useIsMobileDevice

🔦 Context

ok, very specifically, if I click to open a calendar on the date range builder, it forces it into a tray on a thin window even if the window is not on a mobile device. it should not do that and behave as if it was on a non-windowed device.

💻 Code Sample

      <DatePicker
        label={l10n("Starting on")}
        value={startingDate}
        minValue={minStartingValue}
        onChange={(d) => setStartingDate(d.toString())}
        data-testid="starting-date"
        validationState={startDateError || earlyStart ? "invalid" : "valid"}
        marginEnd={8}
        maxWidth={windowWidth}
      />

🌍 Your Environment

Any browser, on a thin window but on a full width screen on a computer, not mobile device. You can see it happen here for example: https://react-spectrum.adobe.com/react-spectrum/DatePicker.html

🧢 Your Team

Client Apps, Report Builder For CJA

[LFDanLu]

The line that would need to be changed to use useIsMobileDevice instead. Will need to test the experience further but would make it behave like our other components