@pega/dx-component-builder-sdk 0.25.7 → 0.26.2

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

@@ -4,12 +4,20 @@ 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,22 +34,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     fieldMetadata,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const [inputValue, setInputValue] = useState('');
 
   let readOnlyProp = {};
@@ -51,11 +68,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
@@ -64,11 +77,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -99,7 +108,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        slotProps={{
+          input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+        }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

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

@@ -4,11 +4,19 @@ import { MuiTelInput } from 'mui-tel-input';
 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -25,14 +33,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     onChange,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
@@ -42,16 +51,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const [inputValue, setInputValue] = useState(value);
   useEffect(() => setInputValue(value), [value]);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  let testProp = {};
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -80,11 +93,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
             slotProps={{
               input: {
                 readOnly: true,
-                ...testProp,
+                ...testProps,
               },
             }}
             <%={{ }}=%>     {{! revert delimiters for mustache }}
             disableDropdown={disableDropdown}
+            {{! pick new delimiters for mustache }}
+            {{=<% %>=}}
+            sx={getFieldSx(status)}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
           />
         </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       </div>
@@ -120,7 +137,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        slotProps={{ input: { ...testProp } }}
+        slotProps={{ input: { ...testProps } }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

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

@@ -4,11 +4,19 @@ 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,15 +34,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const [inputValue, setInputValue] = useState('');
 
@@ -42,27 +52,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   useEffect(() => {
     setInputValue(value);
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = event => {
     setInputValue(event?.target?.value);
@@ -90,7 +99,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ inputProps: { ...testProp } }}
+        slotProps={{
+          input: { inputProps: { ...testProps } }
+        }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

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

@@ -1,4 +1,8 @@
 import { useState } from 'react';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -41,7 +45,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

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

@@ -1,17 +1,23 @@
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 // import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 
 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -22,29 +28,29 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, readOnly, helperText, displayMode, hideLabel, testId, showFieldMessage, messageConfig = {} } = props;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
@@ -64,7 +70,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           // keyboardIcon={<AccessTimeIcon />}
           // fullWidth
@@ -87,12 +92,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
     <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/FORM/DefaultForm.css

@@ -16,10 +16,90 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
 }

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

@@ -1,6 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, PropsWithChildren, useState } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -22,12 +27,24 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMPONENT_CLASS_NAME}}Props>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -55,18 +72,41 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      </div>
+    );
+  };
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <>
-        {instructions && (
-          <div className='psdk-default-form-instruction-text'>
-            {/* server performs sanitization method for instructions html content */}
-            {{! pick new delimiters for mustache }}
-            {{=<% %>=}}
-            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-            <%={{ }}=%>     {{! revert delimiters for mustache }}
-          </div>
-        )}
+        {renderInstructions()}
         <div className={divClass}>{dfChildren}</div>
       </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

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

@@ -108,18 +108,22 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       context
     ) as Promise<any>;
 
-    historyData.then((historyJSON: any) => {
-      const tableDataResults = historyJSON.data.data;
-
-      // compute the rowData using the tableDataResults
-      computeRowData(tableDataResults);
-
-      // At this point, if we have data ready to render and haven't been asked
-      //  to NOT call setWaitingForData, we can stop progress indicator
-      if (bCallSetWaitingForData) {
-        setWaitingForData(false);
-      }
-    });
+    historyData
+      .then((historyJSON: any) => {
+        const tableDataResults = historyJSON.data.data;
+
+        // compute the rowData using the tableDataResults
+        computeRowData(tableDataResults);
+
+        // At this point, if we have data ready to render and haven't been asked
+        //  to NOT call setWaitingForData, we can stop progress indicator
+        if (bCallSetWaitingForData) {
+          setWaitingForData(false);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     return () => {
       // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
@@ -154,9 +158,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });