Merge branch 'master' of https://github.com/pegasystems/react-sdk-components into mod/tor/US-686138

Author: manasa

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "24.2.10",
+  "version": "24.2.11",
   "description": "React SDK packaging: bridge and components, overrides",
   "main": "index.ts",
   "scripts": {
@@ -75,7 +75,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.7.1",
-    "@pega/constellationjs": "~24.2.1",
+    "@pega/constellationjs": "~24.2.2",
     "@pega/eslint-config": "^0.7.2",
     "@pega/pcore-pconnect-typedefs": "~3.2.2",
     "@pega/tsconfig": "^0.6.0",
@@ -115,7 +115,7 @@
     "shx": "^0.3.4",
     "style-loader": "^3.3.4",
     "stylelint": "^16.19.1",
-    "tinymce": "^7.9.0",
+    "tinymce": "^6.8.6",
     "ts-jest": "^29.3.4",
     "ts-loader": "^9.5.2",
     "typescript": "^4.9.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "24.2.10",
+  "version": "24.2.11",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

packages/react-sdk-components/package.json

@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid item xs={variant === 'stacked' || !name ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
           // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
@@ -78,7 +78,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   return (
     <Grid container spacing={4} justifyContent='space-between'>
-      {getGridItemLabel()}
+      {name ? getGridItemLabel() : null}
       {getGridItemValue()}
     </Grid>
   );

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

@@ -88,6 +88,7 @@ export default function Currency(props: CurrrencyProps) {
   return (
     <NumericFormat
       valueIsNumericString
+      variant={readOnly ? 'standard' : 'outlined'}
       label={label}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs, { Dayjs } from 'dayjs';
 
@@ -39,6 +39,10 @@ export default function Date(props: DateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(value));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '../../helpers/formatters/Date';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -19,7 +19,10 @@ export default function DateTime(props: DateTimeProps) {
 
   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 environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -34,6 +37,10 @@ export default function DateTime(props: DateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
@@ -60,8 +67,9 @@ export default function DateTime(props: DateTimeProps) {
   };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 

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

@@ -1,6 +1,6 @@
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
@@ -58,6 +58,10 @@ export default function Decimal(props: DecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {
@@ -109,6 +113,7 @@ export default function Decimal(props: DecimalProps) {
       }}
       onBlur={!readOnly ? decimalOnBlur : undefined}
       prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+      suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
       decimalSeparator={theCurrDec}
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}

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

@@ -137,7 +137,7 @@ export default function Dropdown(props: DropdownProps) {
   }, [theDatasource]);
 
   useEffect(() => {
-    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
@@ -165,23 +165,33 @@ export default function Dropdown(props: DropdownProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-      />
-    );
-  }
+  const displayFn = (displayM, val) => {
+    if (displayM === 'DISPLAY_ONLY') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
+
+    return null;
+  };
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant='stacked'
-      />
-    );
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
@@ -52,6 +52,10 @@ export default function Percentage(props: PercentageProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {