@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

package/tests/assets/sdk-r/components/createAll/override-sdk/template/AppShell/AppShell.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
+import makeStyles from '@mui/styles/makeStyles';
+import Avatar from '@mui/material/Avatar';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -24,6 +24,8 @@ interface AppShellProps extends PConnProps {
   portalName: string;
   portalLogo: string;
   navDisplayOptions: { alignment: string; position: string };
+  httpMessages: string[];
+  pageMessages: string[];
 }
 
 const useStyles = makeStyles(theme => ({
@@ -49,8 +51,21 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const NavBar = getComponentFromMap('NavBar');
   const WssNavBar = getComponentFromMap('WssNavBar');
+  const AlertBanner = getComponentFromMap('AlertBanner');
 
-  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+  const {
+    pages = [],
+    caseTypes = [],
+    showAppName,
+    children = [],
+    getPConnect,
+    httpMessages = [],
+    pageMessages = [],
+    portalTemplate,
+    portalName,
+    portalLogo,
+    navDisplayOptions
+  } = props;
 
   const [open, setOpen] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -75,6 +90,15 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
+  const messages = [...httpMessages, ...pageMessages];
+
+  const hasBanner = messages && messages.length ? messages.length > 0 : false;
+  let banners: any = null;
+  banners = hasBanner && (
+    <div style={{ display: 'flex', flexDirection: 'column', padding: '1em 0' }}>
+      <AlertBanner id='AppShell' variant='urgent' messages={messages} />
+    </div>
+  );
   // Initial setting of appName and mapChildren
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
@@ -92,6 +116,25 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     setMapChildren(tempMap);
   }, []);
 
+  useEffect(() => {
+    // @ts-ignore
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = pConn.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, pConn.getContextName(), {
+          PortalName: portalID
+        })
+        .then(response => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            pConn.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+  }, []);
+
   const [iconURL, setIconURL] = useState('');
   const [fullIconURL, setFullIconURL] = useState('');
   useEffect(() => {
@@ -187,7 +230,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           operator={getOperator()}
           navDisplayOptions={navDisplayOptions}
         />
-        <div className={classes.wsscontent}>{children}</div>
+        <div className={classes.wsscontent}>
+          {banners}
+          {children}
+        </div>
       </div>
     );
   }
@@ -203,7 +249,11 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           pages={pages}
           caseTypes={caseTypes}
         />
-        <div className={classes.content}>{children}</div>
+
+        <div className={classes.content}>
+          {banners}
+          {children}
+        </div>
       </div>
     </NavContext.Provider>
   );

package/tests/assets/sdk-r/components/createAll/override-sdk/template/BannerPage/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "componentKey": "BannerPage",
+    "name": "BannerPage",
+    "label": "Banner",
+    "description": "Banner Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "icon": "BannerPage.svg",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseView/CaseView.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-boolean-value */
 
 import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import { Avatar, Card, CardHeader, Divider, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 interface CaseViewActionsMenuProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -44,7 +44,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Confirmation/Confirmation.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { PropsWithChildren, useState } from 'react';
-import { Button, Card, makeStyles } from '@material-ui/core';
+import { Button, Card } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DataReference/DataReference.tsx

@@ -52,7 +52,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
   let propName;
-  const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+  const isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode);
   let firstChildPConnect;
 
   /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
@@ -251,7 +251,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   }
 
   return childrenToRender.length === 1 ? (
-    childrenToRender[0] ?? null
+    (childrenToRender[0] ?? null)
   ) : (
     <div>
       {childrenToRender.map(child => (

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Details/Details.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function Details(props: DetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsSubTabs/DetailsSubTabs.tsx

@@ -1,6 +1,6 @@
 import { Children, PropsWithChildren, useEffect, useState } from 'react';
-import { Tab, Tabs, TextField } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -39,7 +39,7 @@ export default function DetailsSubTabs(props: PropsWithChildren<DetailsSubTabsPr
 
   return (
     <>
-      {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}
+      {propsToUse.showLabel && <h3>{propsToUse.label}</h3>}
       <TabContext value={currentTabId.toString()}>
         <Tabs onChange={handleTabClick} value={currentTabId}>
           {tabItems.map((tab: any) => (

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
 
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -37,9 +37,16 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const resolvedList = getReferenceList(pConn);
   pConn.setReferenceList(resolvedList);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
-  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  useLayoutEffect(() => {
+    if (!isReadonlyMode) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      pConn.getListActions().initDefaultPageInstructions(resolvedList);
+    }
+  }, [referenceList?.length]);
+
   const getDynamicHeaderProp = (item, index) => {
     if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
       return item[heading.substring(1)];
@@ -89,7 +96,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     );
   }
 
-  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   const memoisedReadOnlyList = useMemo(() => {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;

package/tests/assets/sdk-r/components/createAll/override-sdk/template/InlineDashboard/InlineDashboard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardProps extends PConnProps {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/InlineDashboardPage/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "componentKey": "InlineDashboardPage",
+    "name": "InlineDashboardPage",
+    "label": "Inline Dashboard",
+    "description": "Inline Dashboard Page Template",
+    "type": "Template",
+    "subtype": "PAGE",
+    "icon": "InlineDashboardPage.svg",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx

@@ -4,37 +4,39 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Paper from '@material-ui/core/Paper';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import SearchIcon from '@material-ui/icons/Search';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import { Radio } from '@material-ui/core';
-import Checkbox from '@material-ui/core/Checkbox';
+import { Theme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Radio } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
 
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 
@@ -670,7 +672,7 @@ export default function ListView(props: ListViewProps) {
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -1047,6 +1049,7 @@ export default function ListView(props: ListViewProps) {
                                       onClick={() => {
                                         _listViewClick(row, column);
                                       }}
+                                      underline='hover'
                                     >
                                       {column.format && typeof value === 'number' ? column.format(value) : value}
                                     </Link>
@@ -1158,7 +1161,7 @@ export default function ListView(props: ListViewProps) {
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
                 <MenuItem value='notequal'>is not equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
                 <MenuItem value='before'>before</MenuItem>
@@ -1167,6 +1170,7 @@ export default function ListView(props: ListViewProps) {
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1178,6 +1182,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1189,6 +1194,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1201,12 +1207,13 @@ export default function ListView(props: ListViewProps) {
             </>
           ) : (
             <>
-              <Select fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
               </Select>
               <TextField
+                variant='standard'
                 autoFocus
                 margin='dense'
                 id='containsFilter'

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/utils.ts

@@ -678,7 +678,7 @@ export const readContextResponse = async (context, params) => {
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
     if (compositeKeys.length) {
-      otherContext.setCompositeKeys(compositeKeys);
+      otherContext?.setCompositeKeys(compositeKeys);
     }
     if (otherContext) {
       otherContext.fetchRowActionDetails = null;

package/tests/assets/sdk-r/components/createAll/override-sdk/template/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid, { GridSize } from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -26,7 +26,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/OneColumn/OneColumn.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface OneColumnProps extends PConnProps {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/PromotedFilters/PromotedFilters.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState, createElement } from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';

package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -1,28 +1,28 @@
 /* eslint-disable no-nested-ternary */
 import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import makeStyles from '@mui/styles/makeStyles';
+import Link from '@mui/material/Link';
 import { createElement } from 'react';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -698,7 +698,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
-          <Link style={{ cursor: 'pointer' }} onClick={addRecord}>
+          <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
             + Add
           </Link>
         </div>
@@ -716,7 +716,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
                 <MenuItem value='notequal'>is not equal to</MenuItem>
                 <MenuItem value='equal'>is equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
@@ -726,6 +726,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -737,6 +738,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -748,6 +750,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -760,12 +763,13 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             </>
           ) : (
             <>
-              <Select id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
               </Select>
               <TextField
+                variant='standard'
                 autoFocus
                 margin='dense'
                 id='containsFilter'

package/tests/assets/sdk-r/components/createAll/override-sdk/template/SubTabs/SubTabs.tsx

@@ -1,6 +1,6 @@
 import { Children, PropsWithChildren, useEffect, useState } from 'react';
-import { Tab, Tabs } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

package/tests/assets/sdk-r/components/createAll/override-sdk/template/TwoColumn/TwoColumn.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, GridSize } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnProps extends PConnProps {