chore(deps): upgrade React, MUI, TS, Webpack

Author: ghoshArnab

.prettierrc.js

@@ -1,9 +1,7 @@
 // Prettier config options: https://prettier.io/docs/en/options.html
 // Shared front-end config: https://git.pega.io/projects/FE/repos/configs/browse/packages/prettier-config/index.json
 
-const pegaPrettierConfig = require('@pega/prettier-config');
-
-module.exports = {
-  ...pegaPrettierConfig,
+module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({
+  ...pegaPrettierConfig.default,
   printWidth: 150
-};
+}));

package-lock.json

@@ -50,78 +50,78 @@
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
-    "@mui/x-date-pickers": "^7.20.0",
-    "@pega/auth": "~0.2.15",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.11",
+    "@mui/lab": "^6.0.1-beta.34",
+    "@mui/material": "^6.4.11",
+    "@mui/styles": "^6.4.8",
+    "@mui/x-date-pickers": "^7.29.3",
+    "@pega/auth": "~0.2.24",
     "@tinymce/tinymce-react": "^5.1.1",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.difference": "^4.5.0",
     "mui-tel-input": "^6.0.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.25.0",
-    "react-dom": "^17.0.2",
-    "react-number-format": "^5.4.2",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.22.3",
+    "react-dom": "^18.3.1",
+    "react-number-format": "^5.4.4",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.6.0",
     "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
-    "@pega/configs": "^0.7.1",
+    "@pega/configs": "^0.16.3",
     "@pega/constellationjs": "~0.242.5",
-    "@pega/eslint-config": "^0.7.2",
-    "@pega/pcore-pconnect-typedefs": "~3.0.0",
-    "@pega/tsconfig": "^0.6.0",
-    "@playwright/test": "^1.40.1",
+    "@pega/eslint-config": "^0.16.3",
+    "@pega/pcore-pconnect-typedefs": "~3.2.1",
+    "@pega/tsconfig": "^0.16.3",
+    "@playwright/test": "^1.52.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^17.0.83",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.3.21",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^10.0.0",
     "commitlint": "^18.4.4",
-    "compression-webpack-plugin": "^10.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "copy-webpack-plugin": "^13.0.0",
     "cspell": "^8.3.2",
-    "css-loader": "^6.9.0",
+    "css-loader": "^7.1.2",
     "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^27.6.2",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.23.0",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "istanbul": "^0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "json5": ">=2.2.3",
-    "monocart-reporter": "^2.2.1",
+    "monocart-reporter": "^2.9.18",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
-    "replace-in-file": "^7.1.0",
-    "sass-loader": "^13.3.3",
-    "shx": "^0.3.4",
-    "style-loader": "^3.3.4",
-    "stylelint": "^16.1.0",
-    "tinymce": "^7.3.0",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "replace-in-file": "^7.2.0",
+    "sass-loader": "^14.2.1",
+    "shx": "^0.4.0",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.19.1",
+    "tinymce": "^7.8.0",
+    "ts-jest": "^29.3.2",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.8",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   }
 }

package.json

@@ -91,7 +91,7 @@
       }
     },
     {
-      "files": "*.@(jsx|tsx|mdx)",
+      "files": "*.@(jsx|ts|tsx|mdx)",
       "rules": {
         "react/react-in-jsx-scope": "off",
         // Set up configuration for future sweep

packages/react-sdk-components/.eslintrc.json

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import Grid from '@mui/material/Grid';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';

packages/react-sdk-components/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '../../helpers/utils';
-import { PConnProps } from '../../../types/PConnProps';
+import type { PConnProps } from '../../../types/PConnProps';
 
 // Operator is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

packages/react-sdk-components/src/components/designSystemExtension/Operator/Operator.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 

packages/react-sdk-components/src/components/designSystemExtension/Pulse/Pulse.tsx

@@ -7,7 +7,7 @@ import Utils from '../../helpers/utils';
 import { getDataPage } from '../../helpers/data_page';
 import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 
 interface IOption {
   key: string;

packages/react-sdk-components/src/components/field/AutoComplete/AutoComplete.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Grid, IconButton, Snackbar } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {
@@ -78,7 +78,7 @@ export default function CancelAlert(props: CancelAlertProps) {
         });
     } else if (isLocalAction) {
       dismiss(true);
-      actionsAPI.cancelAssignment(containerItemID);
+      actionsAPI.cancelAssignment(containerItemID, false);
     } else if (isBulkAction) {
       dismiss(true);
       actionsAPI.cancelBulkAction(containerItemID);

packages/react-sdk-components/src/components/field/CancelAlert/CancelAlert.tsx

@@ -6,7 +6,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import handleEvent from '../../helpers/event-utils';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '../../helpers/instructions-utils';
-import { PConnFieldProps } from '../../../types/PConnProps';
+import type { PConnFieldProps } from '../../../types/PConnProps';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here