chore: update dependencies

.changeset/spotty-parents-explain.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Bump dependencies

jest.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable github/unescaped-html-literal */
 module.exports = {
+  testEnvironment: 'jsdom',
   cacheDirectory: '.test',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],

package.json

@@ -49,87 +49,87 @@
     "@primer/octicons-react": "^13.0.0",
     "@primer/primitives": "0.0.0-202121782215",
     "@styled-system/css": "5.1.5",
-    "@styled-system/props": "5.1.4",
+    "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
     "@types/history": "4.7.8",
     "@types/styled-components": "5.1.7",
-    "@types/styled-system": "5.1.10",
-    "@types/styled-system__css": "5.0.14",
+    "@types/styled-system": "5.1.11",
+    "@types/styled-system__css": "5.0.15",
     "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
-    "styled-system": "5.1.2"
+    "styled-system": "5.1.5"
   },
   "devDependencies": {
-    "@babel/cli": "7.8.4",
-    "@babel/core": "7.9.0",
-    "@babel/eslint-parser": "7.13.14",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "7.12.16",
-    "@babel/plugin-transform-modules-commonjs": "7.12.1",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.12.7",
-    "@changesets/changelog-github": "0.2.8",
-    "@changesets/cli": "2.13.0",
+    "@babel/cli": "7.14.5",
+    "@babel/core": "7.14.5",
+    "@babel/eslint-parser": "7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-transform-modules-commonjs": "7.14.5",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.14.5",
+    "@changesets/changelog-github": "0.4.0",
+    "@changesets/cli": "2.16.0",
     "@github/prettier-config": "0.0.4",
-    "@rollup/plugin-commonjs": "16.0.0",
-    "@rollup/plugin-node-resolve": "7.1.3",
-    "@storybook/addon-actions": "^6.1.17",
+    "@rollup/plugin-commonjs": "19.0.0",
+    "@rollup/plugin-node-resolve": "13.0.0",
+    "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "^6.1.17",
+    "@storybook/addon-links": "^6.2.9",
     "@storybook/react": "6.2.9",
-    "@testing-library/dom": "7.29.0",
-    "@testing-library/react": "11.2.2",
-    "@testing-library/react-hooks": "5.0.3",
-    "@testing-library/user-event": "13.0.6",
+    "@testing-library/dom": "7.31.2",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/react-hooks": "7.0.0",
+    "@testing-library/user-event": "13.1.9",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.8",
-    "@types/jest": "26.0.20",
+    "@types/jest": "26.0.23",
     "@types/jest-axe": "3.5.1",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
-    "@typescript-eslint/eslint-plugin": "4.20.0",
-    "@typescript-eslint/parser": "4.20.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.3.2",
+    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/parser": "4.26.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-react-displayname": "0.0.5",
-    "babel-plugin-macros": "2.8.0",
+    "babel-plugin-macros": "3.1.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-styled-components": "1.10.7",
+    "babel-plugin-styled-components": "1.12.0",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
-    "chroma-js": "2.1.0",
-    "concurrently": "5.3.0",
+    "chroma-js": "2.1.2",
+    "concurrently": "6.2.0",
     "copyfiles": "2.4.1",
-    "cross-env": "7.0.2",
-    "enzyme": "3.10.0",
-    "eslint": "7.23.0",
+    "cross-env": "7.0.3",
+    "enzyme": "3.11.0",
+    "eslint": "7.28.0",
     "eslint-plugin-github": "4.1.3",
-    "eslint-plugin-jest": "24.3.2",
+    "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "jest": "26.6.3",
-    "jest-axe": "4.1.0",
-    "jest-styled-components": "6.3.3",
-    "jscodeshift": "0.6.4",
+    "jest": "27.0.4",
+    "jest-axe": "5.0.1",
+    "jest-styled-components": "6.3.4",
+    "jscodeshift": "0.12.0",
     "lodash.isempty": "4.4.0",
     "lodash.isobject": "3.0.2",
-    "playroom": "0.15.1",
-    "prettier": "2.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "16.10.2",
-    "rollup": "2.33.1",
+    "playroom": "0.25.0",
+    "prettier": "2.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
+    "rollup": "2.51.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "4.0.4",
-    "semver": "7.3.2",
+    "rollup-plugin-visualizer": "5.5.0",
+    "semver": "7.3.5",
     "styled-components": "4.4.1",
-    "typescript": "4.1.3"
+    "typescript": "4.2.2"
   },
   "peerDependencies": {
     "react": "^17.0.0",

src/ActionList/List.tsx

@@ -108,9 +108,7 @@ const StyledList = styled.div`
  * Returns `sx` prop values for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.
  */
-function useListVariant(
-  variant: ListProps['variant'] = 'inset'
-): {
+function useListVariant(variant: ListProps['variant'] = 'inset'): {
   firstGroupStyle?: SystemCssProperties
   lastGroupStyle?: SystemCssProperties
   headerStyle?: SystemCssProperties

src/__tests__/useSafeTimeout.tsx

@@ -1,6 +1,10 @@
 import {renderHook} from '@testing-library/react-hooks'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 
+afterEach(() => {
+  jest.useRealTimers()
+})
+
 test('should call callback after time', async () => {
   const {result, waitFor} = renderHook(() => useSafeTimeout())
   const mockFunction = jest.fn()
@@ -10,6 +14,7 @@ test('should call callback after time', async () => {
 
 test('should clear timeouts when safeClearTimeout is called', () => {
   jest.useFakeTimers()
+  jest.spyOn(global, 'clearTimeout')
   const {result} = renderHook(() => useSafeTimeout())
   const mockFunction = jest.fn()
   const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
@@ -20,6 +25,7 @@ test('should clear timeouts when safeClearTimeout is called', () => {
 
 test('should clear timeouts when the component is unmounted', () => {
   jest.useFakeTimers()
+  jest.spyOn(global, 'clearTimeout')
   const {result, unmount} = renderHook(() => useSafeTimeout())
   const mockFunction = jest.fn()
   const timeoutId = result.current.safeSetTimeout(mockFunction, 300)

src/utils/test-matchers.tsx

@@ -1,4 +1,3 @@
-import {Nullish} from '@testing-library/react'
 import 'jest-styled-components'
 import {styleSheetSerializer} from 'jest-styled-components/serializer'
 import React from 'react'
@@ -50,7 +49,7 @@ expect.extend({
     function checkStylesDeep(rendered: ReactTestRendererJSON): boolean {
       const className = rendered.props.className
       const styles = getComputedStyles(className)
-      const mediaStyles = styles[mediaKey] as Nullish<Record<string, string>>
+      const mediaStyles = styles[mediaKey] as Record<string, string> | null
       if (mediaStyles && mediaStyles.color) {
         return true
       } else if (rendered.children) {