chore(deps): incremental update dependencies flagged by renovate

- Upgraded wait-on from 5.3.0 -> 7.2.0. Affects cypress testing.
- Upgraded typescript from 4.9.5 -> 5.3.3. Affects build script.
- Upgraded @typescript-eslint/eslint-plugin from 5.62.0 -> 6.19.1. Affects lint-js.
- Upgraded @typescript-eslint/parser from 5.62.0 -> 6.19.1. Affects lint-js.
- Upgraded ts-jest from 27.1.5 -> 29.1.2. Affects tests.
- Upgraded stylelint from 15.11.0 -> 16.2.0. Affects lint-style.
- Upgraded stylelint-config-recommended-scss from 5.0.2 -> 14.0.0. Affects lint-style.
- Upgraded stylelint-order from 5.0.0 -> 6.0.4. Affects lint-style.
- Upgraded stylelint from 2.0.0 -> 5.0.0. Affects lint-style.
- Upgraded prettier from 2.8.8 -> 3.2.4. Affects lint-js.
- Upgraded eslint-config-prettier from 8.10.0 -> 9.1.0. Affects lint-js.
- Upgraded eslint-plugin-prettier from 4.2.1 -> 5.1.3. Affects lint-js.
- Upgraded eslint-plugin-testing-library from 5.11.1 -> 6.2.0. Affects lint-js.
- Upgraded @percy/storybook from 4.3.7 -> 5.0.1. Affects testing.
- Upgraded @testing-library/cypress from 9.0.0 -> 10.0.1. Affects testing.
- Upgraded @testing-library/jest-dom from 5.17.0 -> 6.2.1. Affects testing.
- Upgraded babel-jest from 27.5.1 -> 29.7.0. Affects testing.
- Upgraded cypress from 12.17.4 -> 13.6.3. Affects testing.
- Upgraded jest from 27.5.1 -> 29.7.0. Affects testing.
- Upgraded npm-package-json-lint from 5.4.2 -> 7.1.0. Affects lint.
- Upgraded sass-loader from 10.5.1 -> 14.0.0. Affects build.
- Upgraded @types/jest from 27.5.2 -> 29.5.11. Affects build.
- Upgraded nanoid from 3.3.7 -> 5.0.4. Affects build.
- Added jest-environment-jsdom, this is needed for jest upgrade (jest-environment-jsdom no longer ship with jest since v28)
- use node lts in test github workflow
- updated github action dependencies
- updated Docerfile base node image version to 21

Signed-off-by: Mason Hu <[email protected]>

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     sourceType: "module",
   },
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { trailingComma: "es5" }],
     "react/forbid-component-props": [
       "error",
       {
@@ -73,7 +73,7 @@ module.exports = {
       rules: {
         "testing-library/no-node-access": "warn",
         "testing-library/no-container": "warn",
-        "testing-library/no-render-in-setup": "warn",
+        "testing-library/no-render-in-lifecycle": "warn",
       },
     },
   ],

.github/workflows/labeler.yaml

@@ -6,6 +6,6 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v5
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/publish-docs.yml

@@ -13,13 +13,13 @@ jobs:
         uses: actions/checkout@v4
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Install dependencies
         run: yarn install
       - name: Build Storybook
         run: yarn build-docs
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "./docs"
   publish-docs:
@@ -36,4 +36,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/publish-on-release.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org/

.github/workflows/test.yaml

@@ -14,9 +14,9 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: "lts/*"
 
       - name: Install dependencies
         run: yarn install
@@ -44,12 +44,12 @@ jobs:
           browser: chrome
           headless: true
           env: port=9009
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-videos

.stylelintrc.json

@@ -21,7 +21,7 @@
     "scss/at-rule-no-unknown": true,
 
     "scss/at-extend-no-missing-placeholder": true,
-    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/load-no-partial-leading-underscore": true,
     "scss/at-import-partial-extension": "never",
 
     "order/properties-alphabetical-order": true,

Dockerfile

@@ -2,7 +2,7 @@
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:18 AS yarn-dependencies
+FROM node:21 AS yarn-dependencies
 WORKDIR /srv
 ADD package.json .
 ADD yarn.lock .
@@ -19,7 +19,7 @@ RUN yarn run build-docs
 
 # Build the production image
 # ===
-FROM ubuntu:focal
+FROM ubuntu:jammy
 
 # Set up environment
 ENV LANG C.UTF-8

package.json

@@ -26,7 +26,7 @@
     "@babel/eslint-parser": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@percy/cli": "1.27.6",
-    "@percy/storybook": "4.3.7",
+    "@percy/storybook": "5.0.1",
     "@storybook/addon-a11y": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
     "@storybook/addon-interactions": "7.6.7",
@@ -36,63 +36,64 @@
     "@storybook/blocks": "7.6.7",
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
-    "@testing-library/cypress": "9.0.0",
+    "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.2.1",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "babel-jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
+    "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "8.2.2",
     "css-loader": "6.8.1",
-    "cypress": "12.17.4",
+    "cypress": "13.6.3",
     "deepmerge": "4.3.1",
     "eslint": "8.56.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "5.11.1",
-    "jest": "27.5.1",
-    "npm-package-json-lint": "5.4.2",
-    "prettier": "2.8.8",
+    "eslint-plugin-testing-library": "6.2.0",
+    "jest": "29.7.0",
+    "npm-package-json-lint": "7.1.0",
+    "prettier": "3.2.4",
     "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
     "sass": "1.69.7",
-    "sass-loader": "10.5.1",
+    "sass-loader": "14.0.0",
     "storybook": "7.6.7",
     "style-loader": "3.3.3",
-    "stylelint": "15.11.0",
+    "stylelint": "16.2.0",
     "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
-    "ts-jest": "27.1.5",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
+    "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
-    "typescript": "4.9.5",
+    "typescript": "5.3.3",
     "vanilla-framework": "4.6.0",
-    "wait-on": "5.3.0",
+    "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },
   "dependencies": {
-    "@types/jest": "27.5.2",
+    "@types/jest": "29.5.11",
     "@types/node": "18.19.4",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/react-table": "7.7.19",
     "classnames": "2.5.1",
-    "nanoid": "3.3.7",
+    "jest-environment-jsdom": "29.7.0",
+    "nanoid": "5.0.4",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"

src/components/ActionButton/ActionButton.test.tsx

@@ -9,7 +9,7 @@ import ActionButton, {
 import { act } from "react-dom/test-utils";
 
 describe("ActionButton", () => {
-  jest.useFakeTimers("modern");
+  jest.useFakeTimers();
 
   it("matches loading snapshot", () => {
     render(<ActionButton loading>Click me</ActionButton>);

src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.tsx

@@ -6,7 +6,7 @@ import ContextualMenuDropdown, {
   adjustForWindow,
 } from "./ContextualMenuDropdown";
 
-jest.useFakeTimers("modern");
+jest.useFakeTimers();
 
 describe("ContextualMenuDropdown ", () => {
   it("renders", () => {

src/components/Notification/Notification.test.tsx

@@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event";
 
 describe("Notification", () => {
   beforeEach(() => {
-    jest.useFakeTimers("modern");
+    jest.useFakeTimers();
   });
 
   it("renders", () => {

src/components/TablePagination/TablePagination.test.tsx

@@ -37,22 +37,22 @@ describe("<TablePagination />", () => {
     );
   });
 
-  it("has correct per page setting when changed", () => {
+  it("has correct per page setting when changed", async () => {
     render(<TablePagination data={dummyData} pageLimits={[2, 5, 10]} />);
 
     expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
-    userEvent.selectOptions(
+    await userEvent.selectOptions(
       screen.getByRole("combobox", { name: "Items per page" }),
       "5"
     );
     expect(screen.getByRole("navigation")).toHaveTextContent("5/page");
   });
 
-  it("resets to first page when page size is changed", () => {
+  it("resets to first page when page size is changed", async () => {
     render(<TablePagination data={dummyData} pageLimits={[2, 5, 10]} />);
 
     expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
-    userEvent.selectOptions(
+    await userEvent.selectOptions(
       screen.getByRole("combobox", { name: "Items per page" }),
       "5"
     );
@@ -80,7 +80,7 @@ describe("<TablePagination />", () => {
     expect(currentPageInput).toHaveValue(2);
     await userEvent.selectOptions(pageSizeSelector, "2");
     expect(currentPageInput).toHaveValue(1);
-    await fireEvent.change(currentPageInput, { target: { value: 3 } });
+    fireEvent.change(currentPageInput, { target: { value: 3 } });
     expect(currentPageInput).toHaveValue(3);
     await userEvent.click(incButton);
     expect(currentPageInput).toHaveValue(3);

src/components/TablePagination/TablePaginationControls/__snapshots__/TablePaginationControls.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TablePaginationControls /> renders table pagination controls and matches the snapshot 1`] = `
-Array [
+[
   <button
     aria-label="Previous page"
     class="p-button--base has-icon back"

src/components/Tooltip/Tooltip.test.tsx

@@ -9,7 +9,7 @@ describe("Tooltip", () => {
   let userEventWithTimers: UserEvent;
 
   beforeEach(() => {
-    jest.useFakeTimers("modern");
+    jest.useFakeTimers();
 
     userEventWithTimers = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,

src/hooks/useThrottle.test.ts

@@ -2,7 +2,7 @@ import { renderHook } from "@testing-library/react";
 
 import { THROTTLE_DELAY, useThrottle } from "./useThrottle";
 
-jest.useFakeTimers("modern");
+jest.useFakeTimers();
 
 describe("useThrottle", () => {
   let callback: jest.Mock;

src/hooks/useWindowFitment.test.ts

@@ -75,7 +75,7 @@ describe("useWindowFitment", () => {
         left: 20,
         top: 20,
         width: 10,
-      } as DOMRect);
+      }) as DOMRect;
     renderHook(() => useWindowFitment(targetNode, referenceNode, callback));
     expect(callback).toHaveBeenCalledWith({
       fromTop: {
@@ -128,7 +128,7 @@ describe("useWindowFitment", () => {
         left: 5,
         top: 5,
         width: 20,
-      } as DOMRect);
+      }) as DOMRect;
     global.innerHeight = 10;
     global.innerWidth = 10;
     renderHook(() => useWindowFitment(targetNode, referenceNode, callback));

src/types/react-table-config.d.ts

@@ -13,7 +13,7 @@ declare module "react-table" {
     extends UseSortByOptions<D> {}
 
   export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>
+    D extends Record<string, unknown> = Record<string, unknown>,
   > extends UseSortByState<D> {}
 
   export interface UseTableColumnOptions<D extends Record<string, unknown>>
@@ -23,7 +23,7 @@ declare module "react-table" {
   }
 
   export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
+    D extends Record<string, unknown> = Record<string, unknown>,
   > extends UseFiltersColumnProps<D>,
       UseSortByColumnProps<D> {}
 }