@pega/dx-component-builder-sdk 0.24.7 → 0.242.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.24.7",
+  "version": "0.242.1",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -52,7 +52,7 @@
     "sass-loader": "^13.3.3",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5",
+    "typescript": "~5.2.2",
     "url-loader": "4.1.1",
     "webpack": "^5.89.0"
   },

package/src/tasks/authenticate/index.js

@@ -208,6 +208,6 @@ export default async options => {
     }
   }
 
-  process.exit(1);
+  process.exit();
 
 };

package/src/tasks/create/templates/Constellation/field/Boolean/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

package/src/tasks/create/templates/Constellation/field/Boolean/index.tsx.mustache

@@ -87,7 +87,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
@@ -98,15 +97,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
       <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComponent} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+       {displayComponent}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/src/tasks/create/templates/Constellation/field/Boolean/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

package/src/tasks/create/templates/Constellation/field/Date/index.tsx.mustache

@@ -104,8 +104,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
   }, [validatemessage, hasSuggestions, myStatus]);
 
   // calculate min and max range of calendar
-  // @ts-ignore
-  const currentYear = getFullYear();
+  const currentYear = getFullYear(null);
 
   const yearFromValue = getFullYear(value);
   const maxDate = getMaxDate(
@@ -161,7 +160,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
      }
 
 
-    if (formatter !== "" && formatExists(formatter)){
+    if (formatter !== "" && formatExists(formatter)) {
         // @ts-ignore
         const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
@@ -225,8 +224,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
           hideLabel={hideLabel}
           testId={testId}
           additionalProps={textAdditionalProps}
-          // @ts-ignore
-          customFormat={getDateFormat(locale)}
+          customFormat={getDateFormat(locale, null)}
         />
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );

package/src/tasks/create/templates/Constellation/field/Integer/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
@@ -15,7 +14,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/field/Integer/event-utils.ts.mustache

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/src/tasks/create/templates/Constellation/field/Integer/index.tsx.mustache

@@ -112,21 +112,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   useEffect(() => {
     if (displayAs === 'slider' && value === '') {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
   }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision = 'auto', currencyISOCode = 'USD' } = props;
-  let noOfDecimals = parseInt(decimalPrecision, 10);
-  // @ts-ignore
+  let noOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = undefined;
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
-  let unitPlacement;
 
-  // @ts-ignore
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -134,7 +130,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       case 'Percentage': {
         showGroupSeparators = false;
         unit = '%';
-        unitPlacement = 'after';
         break;
       }
       case 'Decimal-Auto': {
@@ -180,7 +175,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             notation
           }}
           unit={unit}
-          unitPlacement={unitPlacement}
         />
       );
 
@@ -233,13 +227,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     setIntegerValue(enteredValue);
     // const parsedValue = integerValue !== '' ? Number(integerValue) : '';
     if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
       hasValueChange.current = true;
     }
     // In case of stepper variation there is no blur event as component is never focussed unless forced. Need to update redux on change.
     if (displayAs === 'stepper') {
-      // @ts-ignore
       handleEvent(actions, 'changeNblur', propName, enteredValue !== '' ? Number(enteredValue) : '');
     }
   }
@@ -271,7 +263,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       ticks={showTicks && { [min]: `${min}`, [max]: `${max}` }}
       onChange={(selectedValue) => {
         onChangeHandler(selectedValue.toString());
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, selectedValue);
       }}
     />
@@ -298,7 +289,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }}
       onBlur={() => {
         if (!readOnly && (hasValueChange.current || !value)) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, integerValue !== '' ? Number(integerValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/src/tasks/create/templates/Constellation/field/Integer/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Integer Sample',
@@ -12,7 +11,9 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: '',
+  variant: ''
 };
 
 export const stateProps = {

package/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { makeStyles } from '@material-ui/core/styles';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {

package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache

@@ -1,10 +1,13 @@
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { useState } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs, { Dayjs } from 'dayjs';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
@@ -24,22 +27,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    onBlur,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -81,44 +71,34 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const handleChange = date => {
     if (date && date.isValid()) {
-      onChange({ value: getFormattedDate(date) });
-    }
-  };
-
-  const handleAccept = date => {
-    if (date && date.isValid()) {
+      setDateValue(date);
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
     }
   };
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDatePicker
-          disableToolbar
-          variant='inline'
-          inputVariant='outlined'
-          placeholder={dateFormatInfo.dateFormatStringLC}
-          format={dateFormatInfo.dateFormatString}
-          mask={dateFormatInfo.dateFormatMask}
-          fullWidth
-          autoOk
-          required={required}
-          disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
-          size='small'
-          label={label}
-          value={value || null}
-          onChange={handleChange}
-          onBlur={!readOnly ? onBlur : undefined}
-          onAccept={handleAccept}
-        {{! pick new delimiters for mustache }}
-        {{=<% %>=}}
-          InputProps={{ ...testProp }}
-        <%={{ }}=%>     {{! revert delimiters for mustache }}
-        />
-      </MuiPickersUtilsProvider>
+    <DatePicker
+      label={label}
+      disabled={disabled}
+      format={dateFormatInfo.dateFormatString}
+      value={dateValue}
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+      slotProps={{
+        textField: {
+          required,
+          variant: 'outlined',
+          placeholder: dateFormatInfo.dateFormatStringLC,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProp }
+        }
+      }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      onChange={handleChange}
+    />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache

@@ -1,11 +1,14 @@
-import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { useState } from 'react';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import dayjs, { Dayjs } from 'dayjs';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -20,21 +23,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -69,11 +60,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   const handleChange = date => {
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
-    onChange({ value: changeValue });
-  };
-
-  const handleAccept = date => {
+    setDateValue(date);
     const changeValue = date && date.isValid() ? date.toISOString() : null;
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
@@ -85,28 +72,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDateTimePicker
-          variant='inline'
-          inputVariant='outlined'
-          fullWidth
-          autoOk
-          required={required}
+      <DateTimePicker
+          // fullWidth
+          // autoOk
           disabled={disabled}
-          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
           format={`${dateFormatInfo.dateFormatString} hh:mm a`}
-          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+          // mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
           minutesStep={5}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
-          size='small'
           label={label}
-          value={value || null}
+          value={dateValue}
           onChange={handleChange}
-          onAccept={handleAccept}
           data-test-id={testId}
-        />
-      </MuiPickersUtilsProvider>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              required,
+              placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small'
+            }
+          }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { useState } from 'react';
-import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -98,7 +99,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <NumericFormat
-        valueIsNumericString
+      valueIsNumericString
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
 import { useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
-import { NumericFormat } from 'react-number-format';
 import { useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { Tooltip, IconButton, Link } from '@material-ui/core';
-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 { Tooltip, IconButton, Link } from '@mui/material';
+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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -14,9 +14,9 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // IMPORTANT
 // import LanguageIcon from '@mui/icons-material/Language';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-import LanguageIcon from '@material-ui/icons/Language';
-import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import LanguageIcon from '@mui/icons-material/Language';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName

package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import MenuItem from '@material-ui/core/MenuItem';
+import { TextField } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import isDeepEqual from 'fast-deep-equal/react';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {

package/src/tasks/create/templates/SDK-React/field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -8,6 +8,7 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {
@@ -198,7 +199,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         getOptionLabel={(option: IOption) => {
           return option.value ? option.value : '';
         }}
-        getOptionSelected={(option: any) => {
+        isOptionEqualToValue={(option: any) => {
           return option.value ? option.value : '';
         }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache

@@ -1,8 +1,9 @@
-import { InputAdornment, TextField } from '@material-ui/core';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import { InputAdornment, TextField } from '@mui/material';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -1,10 +1,10 @@
-import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import dayjs from 'dayjs';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -58,31 +58,33 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardTimePicker
-          variant='inline'
-          inputVariant='outlined'
-          placeholder='hh:mm am'
-          keyboardIcon={<AccessTimeIcon />}
-          fullWidth
-          required={required}
+        <TimePicker
+          // keyboardIcon={<AccessTimeIcon />}
+          // fullWidth
+
           disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
           minutesStep={5}
-          size='small'
           label={label}
-          autoOk
-          mask='__:__ _m'
+          // autoOk
+          // mask='__:__ _m'
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
-          {{! pick new delimiters for mustache }}
-          {{=<% %>=}}
-          InputProps={{ inputProps: { ...testProp } }}
-          <%={{ }}=%>     {{! revert delimiters for mustache }}
+    {{! pick new delimiters for mustache }}
+    {{=<% %>=}}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'hh:mm am',
+              required,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { inputProps: { ...testProp } }
+            }
+          }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache

@@ -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';

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -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';

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -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 } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -35,8 +35,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
   //  (example value: "1fr 1fr")
-  let aSize: GridSize = 6;
-  let bSize: GridSize = 6;
+  let aSize = 6;
+  let bSize = 6;
 
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
@@ -44,8 +44,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
     .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
-  aSize = (ratio * colAArray[0]) as GridSize;
-  bSize = (ratio * colAArray[1]) as GridSize;
+  aSize = (ratio * colAArray[0]) as number;
+  bSize = (ratio * colAArray[1]) as number;
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,5 +1,5 @@
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
   // If any, enter additional props that only exist on this component

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -1,29 +1,30 @@
 import { useEffect, useRef, useState } from 'react';
-import { withStyles, Theme, createStyles } 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 TableRow from '@material-ui/core/TableRow';
+import { withStyles, createStyles } from '@mui/styles';
+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 isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
 }
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -1,26 +1,32 @@
-import { 
-  Card, 
-  CardContent, 
-  CardHeader, 
+import {
+  Card,
+  CardContent,
+  CardHeader,
   Typography,
-  CardActions, 
+  CardActions,
   Button,
   TableContainer,
   Table,
   TableBody,
   TableHead,
-  withStyles,
-  createStyles,
-  Theme,
   TableCell,
-  TableRow 
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+  TableRow
+} from '@mui/material';
+import { withStyles, createStyles } from '@mui/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import isDeepEqual from 'fast-deep-equal/react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { useRef, useEffect, useState } from 'react';
+import { Theme as MuiTheme } from "@mui/material/styles";
+
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -30,23 +36,23 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   whatsnewlink?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginTop: myTheme.spacing(1),
+    marginBottom: myTheme.spacing(1),
     borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
+    borderLeftColor: myTheme.palette.primary.light
   }
 }));
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',
@@ -73,7 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
   const thePConn = getPConnect();
   const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyWorkHistory';
+  const dataViewName = 'D_pyMyWorkList';
   const context = thePConn.getContextName();
 
   const rowData: any = useRef([]);

package/src/tasks/create/templates/SDK-React/widget/PAGE/mock.ts.mustache

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/prefer-default-export
+
 export const configProps = {
   label: 'App announcement',
   header: 'Announcements',

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -1,15 +1,23 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
+
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -22,14 +30,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   displayLabel?: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   },
   popover: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   }
 }));
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -73,7 +73,7 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
   const thePConn = getPConnect();
   const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyWorkHistory';
+  const dataViewName = 'D_pyMyWorkList';
   const context = thePConn.getContextName();
 
   const rowData: any = useRef([]);