Typescript 3.7

UNRELEASED.md

@@ -21,7 +21,7 @@
 
 ### Dependency upgrades
 
-- Upgraded to TypeScript `v3.6.4` ([#2237](https://github.com/Shopify/polaris-react/pull/2237))
+- Upgraded to TypeScript `v3.7.2` ([#2237](https://github.com/Shopify/polaris-react/pull/2237))
 
 ### Code quality
 

package.json

@@ -156,7 +156,7 @@
     "shx": "^0.3.2",
     "storybook-chromatic": "^3.1.0",
     "svgo": "^1.3.0",
-    "typescript": "~3.6.4"
+    "typescript": "~3.7.2"
   },
   "peerDependencies": {
     "react": "^16.8.6",

src/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import {ContextualSaveBarProps, useFrame} from '../../utilities/frame';
+import {
+  ContextualSaveBarProps as ContextualSaveBarProps1,
+  useFrame,
+} from '../../utilities/frame';
 
 // The script in the styleguide that generates the Props Explorer data expects
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
-// crashing if we write `ContextualSaveBar extends React.Component<ContextualSaveBarProps>`
-export interface ContextualSaveBarProps extends ContextualSaveBarProps {}
+// crashing
+export type ContextualSaveBarProps = ContextualSaveBarProps1;
 
 export const ContextualSaveBar = React.memo(function ContextualSaveBar({
   message,

src/components/DropZone/tests/DropZone.test.tsx

@@ -469,6 +469,9 @@ function setBoundingClientRect(size: keyof typeof widths) {
         left: 0,
         bottom: 0,
         right: 0,
+        x: 0,
+        y: 0,
+        toJSON() {},
       };
     });
 }

src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx

@@ -489,16 +489,7 @@ describe('<DualThumb />', () => {
         });
       getBoundingClientRectSpy = jest
         .spyOn(Element.prototype, 'getBoundingClientRect')
-        .mockImplementation(() => {
-          return {
-            width: 124,
-            height: 0,
-            top: 0,
-            left: -12,
-            bottom: 0,
-            right: 0,
-          };
-        });
+        .mockImplementation(mockGetBoundingClientRect);
     });
 
     afterAll(() => {
@@ -702,16 +693,7 @@ describe('<DualThumb />', () => {
         });
       getBoundingClientRectSpy = jest
         .spyOn(Element.prototype, 'getBoundingClientRect')
-        .mockImplementation(() => {
-          return {
-            width: 124,
-            height: 0,
-            top: 0,
-            left: -12,
-            bottom: 0,
-            right: 0,
-          };
-        });
+        .mockImplementation(mockGetBoundingClientRect);
     });
 
     afterAll(() => {
@@ -1042,3 +1024,19 @@ function findThumbUpper(containerComponent: ReactWrapper): ReactWrapper {
 function findTrack(containerComponent: ReactWrapper): ReactWrapper {
   return findByTestID(containerComponent, 'trackWrapper');
 }
+
+function mockGetBoundingClientRect(): ReturnType<
+  Element['getBoundingClientRect']
+> {
+  return {
+    width: 124,
+    height: 0,
+    top: 0,
+    left: -12,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+    toJSON() {},
+  };
+}

src/components/ThemeProvider/ThemeProvider.tsx

@@ -32,10 +32,10 @@ export function ThemeProvider({
     [customProperties, themeConfig, unstableGlobalTheming],
   );
 
-  // We want these values to be `null` instead of `undefined` when not set.
+  // We want these values to be empty string instead of `undefined` when not set.
   // Otherwise, setting a style property to `undefined` does not remove it from the DOM.
-  const backgroundColor = customProperties['--p-surface-background'] || null;
-  const color = customProperties['--p-text-on-surface'] || null;
+  const backgroundColor = customProperties['--p-surface-background'] || '';
+  const color = customProperties['--p-text-on-surface'] || '';
 
   useEffect(() => {
     document.body.style.backgroundColor = backgroundColor;

src/components/Toast/Toast.tsx

@@ -2,16 +2,16 @@ import React, {useRef} from 'react';
 import {Toast as AppBridgeToast} from '@shopify/app-bridge/actions';
 
 import {DEFAULT_TOAST_DURATION} from '../Frame';
-import {ToastProps, useFrame} from '../../utilities/frame';
+import {ToastProps as ToastProps1, useFrame} from '../../utilities/frame';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
 import {useAppBridge} from '../../utilities/app-bridge';
 
 // The script in the styleguide that generates the Props Explorer data expects
 // a component's props to be found in the Props interface. This silly workaround
 // ensures that the Props Explorer table is generated correctly, instead of
-// crashing if we write `ComposedProps = ToastProps & WithAppProviderProps`
-export interface ToastProps extends ToastProps {}
+// crashing
+export type ToastProps = ToastProps1;
 
 export const Toast = React.memo(function Toast(props: ToastProps) {
   const id = useUniqueId('Toast');

src/utilities/tests/is-element-in-viewport.test.ts

@@ -69,5 +69,8 @@ function mockGetBoundingClientRect({
     right,
     height,
     width,
+    x: 0,
+    y: 0,
+    toJSON() {},
   });
 }

yarn.lock

@@ -16886,10 +16886,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~3.6.4:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.4.tgz#b18752bb3792bc1a0281335f7f6ebf1bbfc5b91d"
-  integrity sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==
+typescript@~3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
+  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
 
 ua-parser-js@^0.7.18:
   version "0.7.19"