Update sewing-kit and typescript

.eslintrc

@@ -38,6 +38,7 @@
     "@shopify/jsx-prefer-fragment-wrappers": "off",
     "@shopify/no-ancestor-directory-import": "error",
     "@shopify/react-prefer-private-members": "off",
+    "@typescript-eslint/array-type": ["error", {"defaultOption": "array"}],
     "jsx-a11y/label-has-for": [
       2,
       {

UNRELEASED.md

@@ -23,6 +23,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Development workflow
 
 - Updated our CI accessibility checks to use the axe runnner provided by Storybook's a11y addon. Now now errors match between CI and local runs in Storybook ([#3284](https://github.com/Shopify/polaris-react/pull/3284))
+- Updated sewing-kit to 0.140.0 and TypeScript to 4.0.0 ([#3566](https://github.com/Shopify/polaris-react/pull/3566))
 
 ### Dependency upgrades
 

documentation/Console messages.md

@@ -7,7 +7,7 @@ A console message provides developers with information that helps with debugging
 It’s important to write console messages consistently and succinctly so it’s easy for developers to scan and understand quickly. To do this, follow this general content formula (fill in the blanks):
 
 ```js
-console.[type]('[prefix] message [url]');
+console.type('[prefix] message [url]');
 ```
 
 Pro tip: Always mention the affected component.

package.json

@@ -36,7 +36,7 @@
   "esnext": "dist/esnext/index.ts.esnext",
   "types": "dist/types/latest/src/index.d.ts",
   "typesVersions": {
-    "<3.8": {
+    "<4.0": {
       "dist/types/latest/*": [
         "dist/types/3.4/*"
       ]
@@ -107,7 +107,7 @@
     "@shopify/jest-dom-mocks": "^2.9.1",
     "@shopify/postcss-plugin": "^3.0.1",
     "@shopify/react-testing": "^2.1.2",
-    "@shopify/sewing-kit": "^0.132.2",
+    "@shopify/sewing-kit": "^0.140.0",
     "@shopify/shrink-ray": "^2.3.1",
     "@shopify/splash": "^0.0.8",
     "@storybook/addon-a11y": "^6.0.21",
@@ -131,7 +131,7 @@
     "commander": "^4.1.0",
     "copyfiles": "^2.1.1",
     "core-js": "^3.6.5",
-    "downlevel-dts": "^0.4.0",
+    "downlevel-dts": "^0.6.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "fs-extra": "^7.0.1",
@@ -163,7 +163,7 @@
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "svgo": "^1.3.0",
-    "typescript": "~3.9.2"
+    "typescript": "~4.0.3"
   },
   "browserslist": [
     "last 3 chrome versions",

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

@@ -556,7 +556,7 @@ function fireEvent({
   element: ReactWrapper;
   eventType?: string;
   spy?: jest.Mock;
-  testFiles?: object[];
+  testFiles?: Record<string, unknown>[];
 }) {
   act(() => {
     if (spy) {

src/components/Filters/Filters.tsx

@@ -450,7 +450,7 @@ class FiltersInner extends Component<CombinedProps, State> {
     return filter == null ? undefined : filter.label;
   }
 
-  private getAppliedFilterRemoveHandler(key: string): Function | undefined {
+  private getAppliedFilterRemoveHandler(key: string) {
     const {appliedFilters} = this.props;
 
     if (!appliedFilters) {

src/components/FormLayout/FormLayout.tsx

@@ -24,7 +24,7 @@ export const FormLayout = memo(function FormLayout({
 
 FormLayout.Group = Group;
 
-function wrapChildren(child: React.ReactElement<{}>, index: number) {
+function wrapChildren(child: React.ReactElement, index: number) {
   if (isElementOfType(child, Group)) {
     return child;
   }

src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -39,7 +39,6 @@ export const ToastManager = memo(function ToastManager({
 
   useDeepEffect(() => {
     updateToasts();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toastMessages]);
 
   const toastsMarkup = toastMessages.map((toast, index) => {

src/components/MediaQueryProvider/tests/MediaQueryProvider.test.tsx

@@ -26,6 +26,7 @@ describe('MediaQueryProvider', () => {
   it('passes isNavigationCollapsed to MediaQueryContext.Provider', () => {
     function Component() {
       const mediaQuery = useMediaQuery();
+      // eslint-disable-next-line jest/no-if
       return mediaQuery !== undefined ? <div /> : null;
     }
 
@@ -40,6 +41,7 @@ describe('MediaQueryProvider', () => {
   it('sets isNavigationCollapsed when resize occurs', () => {
     function Component() {
       const {isNavigationCollapsed} = useMediaQuery();
+      // eslint-disable-next-line jest/no-if
       return isNavigationCollapsed ? <div>content</div> : null;
     }
     const mediaQueryProvider = mountWithApp(

src/components/Modal/tests/Modal.test.tsx

@@ -20,7 +20,7 @@ jest.mock('react-transition-group', () => {
   }
 
   return {
-    ...(require.requireActual('react-transition-group') as any),
+    ...(jest.requireActual('react-transition-group') as any),
     TransitionGroup: ChildGroup,
     TransitionChild: ChildGroup,
     CSSTransition: ChildGroup,

src/components/Page/Page.scss

@@ -19,7 +19,7 @@ body {
   // Ensure bottom margins of any children are contained
   &::after {
     content: '';
-    // stylelint-disable-next-line declaration-property-value-blacklist
+    // stylelint-disable-next-line declaration-property-value-disallowed-list
     display: table;
   }
 }

src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx

@@ -41,6 +41,7 @@ describe('PolarisTestProvider', () => {
     it('allows isNavigationCollapsed to be overwritten', () => {
       function Component() {
         const {isNavigationCollapsed} = useMediaQuery();
+        // eslint-disable-next-line jest/no-if
         return isNavigationCollapsed ? <span /> : null;
       }
 

src/components/ResourceList/components/FilterControl/types.ts

@@ -19,33 +19,34 @@ export enum FilterType {
   DateSelector,
 }
 
-export interface FilterBase<FilterKeys = {}> {
+export interface FilterBase<FilterKeys = Record<string, unknown>> {
   label: string;
   key: keyof FilterKeys | string;
   operatorText?: string | Operator[];
   type: FilterType;
 }
 
-export interface FilterSelect<FilterKeys = {}> extends FilterBase<FilterKeys> {
+export interface FilterSelect<FilterKeys = Record<string, unknown>>
+  extends FilterBase<FilterKeys> {
   type: FilterType.Select;
   options: SelectOption[];
 }
 
-export interface FilterTextField<FilterKeys = {}>
+export interface FilterTextField<FilterKeys = Record<string, unknown>>
   extends FilterBase<FilterKeys> {
   type: FilterType.TextField;
   textFieldType?: TextFieldProps['type'];
 }
 
-export interface FilterDateSelector<FilterKeys = {}>
+export interface FilterDateSelector<FilterKeys = Record<string, unknown>>
   extends FilterBase<FilterKeys> {
   type: FilterType.DateSelector;
   minKey: string;
   maxKey: string;
   dateOptionType?: 'past' | 'future' | 'full';
 }
 
-export type Filter<FilterKeys = {}> =
+export type Filter<FilterKeys = Record<string, unknown>> =
   | FilterSelect<FilterKeys>
   | FilterTextField<FilterKeys>
   | FilterDateSelector<FilterKeys>;

src/components/Sticky/Sticky.tsx

@@ -5,7 +5,7 @@ import {useStickyManager} from '../../utilities/sticky-manager';
 
 interface State {
   isSticky: boolean;
-  style: object;
+  style: Record<string, unknown>;
 }
 
 export type StickyProps = {
@@ -119,6 +119,8 @@ class StickyInner extends Component<CombinedProps, State> {
   };
 }
 
+// This should have a typeguard instead of using Function
+// eslint-disable-next-line @typescript-eslint/ban-types
 function isFunction(arg: any): arg is Function {
   return typeof arg === 'function';
 }

src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx

@@ -16,7 +16,7 @@ interface TabMeasurements {
 export interface TabMeasurerProps {
   tabToFocus: number;
   siblingTabHasFocus: boolean;
-  activator: React.ReactElement<{}>;
+  activator: React.ReactElement;
   selected: number;
   tabs: TabDescriptor[];
   handleMeasurement(measurements: TabMeasurements): void;

src/components/TextField/TextField.tsx

@@ -18,7 +18,7 @@ import {Connected} from '../Connected';
 import {Error, Key} from '../../types';
 import {Icon} from '../Icon';
 
-import {Resizer, Spinner} from './components';
+import {Resizer, Spinner, SpinnerProps} from './components';
 import styles from './TextField.scss';
 
 type Type =
@@ -315,15 +315,15 @@ export function TextField({
     clearTimeout(buttonPressTimer.current);
   }, []);
 
-  const handleButtonPress = useCallback(
-    (onChange: Function) => {
+  const handleButtonPress: SpinnerProps['onMouseDown'] = useCallback(
+    (onChange) => {
       const minInterval = 50;
       const decrementBy = 10;
       let interval = 200;
 
       const onChangeInterval = () => {
         if (interval > minInterval) interval -= decrementBy;
-        onChange();
+        onChange(0);
         buttonPressTimer.current = window.setTimeout(
           onChangeInterval,
           interval,

src/components/TextField/components/Spinner/Spinner.tsx

@@ -4,10 +4,12 @@ import {CaretDownMinor, CaretUpMinor} from '@shopify/polaris-icons';
 import {Icon} from '../../../Icon';
 import styles from '../../TextField.scss';
 
+type HandleStepFn = (step: number) => void;
+
 export interface SpinnerProps {
-  onChange(delta: number): void;
+  onChange: HandleStepFn;
   onClick?(): void;
-  onMouseDown(onChange: Function): void;
+  onMouseDown(onChange: HandleStepFn): void;
   onMouseUp(): void;
 }
 
@@ -21,7 +23,7 @@ export function Spinner({
     return () => onChange(step);
   }
 
-  function handleMouseDown(onChange: Function) {
+  function handleMouseDown(onChange: HandleStepFn) {
     return (event: React.MouseEvent) => {
       if (event.button !== 0) return;
       onMouseDown(onChange);

src/components/ThemeProvider/tests/ThemeProvider.test.tsx

@@ -35,6 +35,7 @@ describe('<ThemeProvider />', () => {
   it('passes context', () => {
     const Child: React.SFC = () => {
       const polarisTheme = useContext(ThemeContext);
+      // eslint-disable-next-line jest/no-if
       return polarisTheme && polarisTheme.logo ? <div /> : null;
     };
 

src/components/Toast/Toast.tsx

@@ -20,7 +20,6 @@ export const Toast = memo(function Toast(props: ToastProps) {
     return () => {
       hideToast({id});
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props]);
 
   return null;

src/components/index.ts

@@ -222,10 +222,8 @@ export type {ResourceListProps} from './ResourceList';
 // We want to delete this component, but there's one place in web
 // that still relies on it so we have to keep it.
 // We don't want anyone else using it though, use the Filters component instead
-/* eslint-disable @typescript-eslint/camelcase */
 export {FilterControl as _SECRET_INTERNAL_FilterControl} from './ResourceList';
 export type {FilterControlProps as _SECRET_INTERNAL_FilterControlProps} from './ResourceList';
-/* eslint-enable @typescript-eslint/camelcase */
 
 export type {ResourceListSelectedItems} from '../utilities/resource-list';
 

src/index.ts

@@ -27,9 +27,7 @@ export {
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 
-/* eslint-disable @typescript-eslint/camelcase */
 export {
   toCssCustomPropertySyntax as UNSTABLE_toCssCustomPropertySyntax,
   Tokens as UNSTABLE_Tokens,
 } from './utilities/theme';
-/* eslint-enable @typescript-eslint/camelcase */

src/utilities/color-transformers.ts

@@ -129,11 +129,11 @@ export function hslToRgb(color: HSLAColor): RGBAColor {
 
 // ref https://en.wikipedia.org/wiki/HSL_and_HSV
 function rgbToHsbl(color: RGBAColor, type: 'b' | 'l' = 'b'): HSBLAColor {
-  const {red: r, green: g, blue: b, alpha = 1} = color;
+  const {alpha = 1} = color;
 
-  const red = r / 255;
-  const green = g / 255;
-  const blue = b / 255;
+  const red = color.red / 255;
+  const green = color.green / 255;
+  const blue = color.blue / 255;
 
   const largestComponent = Math.max(red, green, blue);
   const smallestComponent = Math.min(red, green, blue);

src/utilities/components.tsx

@@ -58,7 +58,7 @@ export function isElementOfType<P>(
 
 // Returns all children that are valid elements as an array. Can optionally be
 // filtered by passing `predicate`.
-export function elementChildren<T extends React.ReactElement<{}>>(
+export function elementChildren<T extends React.ReactElement>(
   children: React.ReactNode,
   predicate: (element: T) => boolean = () => true,
 ): T[] {

src/utilities/tests/use-is-after-initial-mount.test.tsx

@@ -8,6 +8,7 @@ describe('useIsAfterInitialMount', () => {
     let isAfterInitialMountValue: boolean | undefined;
     function Component() {
       const isAfterInitialMount = useIsAfterInitialMount();
+      // eslint-disable-next-line jest/no-if
       if (isAfterInitialMountValue === undefined)
         isAfterInitialMountValue = !isAfterInitialMount;
       return null;

src/utilities/theme/utils.ts

@@ -211,6 +211,7 @@ function parseColors([baseName, colors]: [
   return colorPairs;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 function memoize(fnToMemoize: Function) {
   const cache: Map<string, any> = new Map();
   return function (...args: any[]) {

src/utilities/use-deep-compare-ref.tsx

@@ -1,7 +1,7 @@
 import {useRef} from 'react';
 import isEqual from 'lodash/isEqual';
 
-type DependencyList = ReadonlyArray<unknown>;
+type DependencyList = readonly unknown[];
 type Comparator = (a: DependencyList, b: DependencyList) => boolean;
 
 /**

src/utilities/use-deep-effect.tsx

@@ -2,7 +2,7 @@ import {useEffect} from 'react';
 
 import {useDeepCompareRef} from './use-deep-compare-ref';
 
-type DependencyList = ReadonlyArray<unknown>;
+type DependencyList = readonly unknown[];
 
 type Comparator = (a: DependencyList, b: DependencyList) => boolean;
 

tsconfig.build.json

@@ -2,10 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "dist/types/latest",
-    "emitDeclarationOnly": true,
-    "declarationMap": false,
-    "incremental": true
+    "emitDeclarationOnly": true
   },
   "include": ["./config/typescript", "./src"],
   "exclude": ["..src/**/*.test.ts", "./src/**/*.test.tsx"]

tsconfig.json

@@ -4,6 +4,9 @@
     "baseUrl": "./src",
     "rootDir": "./",
     "noEmit": true,
+    "incremental": true,
+    "outDir": "dist/types/latest",
+    "declarationMap": false,
     "isolatedModules": true,
     "importsNotUsedAsValues": "error",
     "strictFunctionTypes": false