@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,7 +1,6 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
-import get from 'lodash.get';
+import get from 'lodash/get.js';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
@@ -409,7 +408,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { formatter } = props;
   let { listType, datasource = [], parameters = {}, columns = [] } = props;
 
-  // enable searhing based on the key
+  // enable searching based on the key
   const { isSearchableOnKey } = props;
 
   const [items, setItems] = useState(() => []);
@@ -520,12 +519,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   }, [parameters]);
 
   const updatedColumns = useMemo(() => {
-    const isSecondaryColumnAvailable = columns.some(col => col.secondary === 'true');
+    let cols = columns;
+    const isSecondaryColumnAvailable = cols.some(col => col.secondary === 'true');
     if (referenceType === 'Case' && !isSecondaryColumnAvailable) {
-      const valueProp = columns.filter(col => col.key === 'true')[0].value;
-      const existingColObj = columns.filter(col => col.value === valueProp);
+      const valueProp = cols.filter(col => col.key === 'true')[0].value;
+      const existingColObj = cols.filter(col => col.value === valueProp);
       if (existingColObj) {
-        columns.forEach(col => {
+        cols.forEach(col => {
           if (col.value === valueProp) {
             col.display = 'true';
             col.secondary = 'true';
@@ -533,8 +533,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           }
         });
       } else {
-        columns = [
-          ...columns,
+        cols = [
+          ...cols,
           {
             value: valueProp.startsWith('.') ? valueProp.substring(1) : valueProp,
             display: 'true',
@@ -559,9 +559,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         return item;
       });
-      columns = descriptorColumns ? [...columns, ...descriptorColumns] : columns;
+      cols = descriptorColumns ? [...cols, ...descriptorColumns] : cols;
     }
-    return columns;
+    return cols;
   }, [listType]);
 
   const dataConfig = useDeepMemo(() => {

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/repeat-utils.ts.mustache

@@ -1,6 +1,3 @@
-/* eslint-disable sonarjs/no-collapsible-if */
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable func-names */
 // @ts-nocheck
 import { splitConditionTree } from '@pega/cosmos-react-condition-builder';
 import cloneDeep from 'lodash/cloneDeep.js';
@@ -55,7 +52,6 @@ export function launchLocalAction(getPConnect, rowContext, action, cb) {
     // "ASSIGN-WORKLIST ON8TTL-C11NGALL-WORK LAT-3!ENTERINFO_FLOW_1" use case
     const [assignKey] = assignmentID.split('!');
     const [, className, workId] = assignKey.split(' ');
-    // eslint-disable-next-line prefer-template
     caseID = className + ' ' + workId;
   }
   openLocalAction(action.ID, {
@@ -254,7 +250,7 @@ export const isSelfReferencedProperty = (param, referenceProp) => {
 /*
   convert configured descriptors/parameters fieldNames
   for leaf level property - @P .Employee.Name -> Name
-  for embedded porperty - @P .Employee.Address.City -> !P!Address:City
+  for embedded property - @P .Employee.Address.City -> !P!Address:City
 */
 export function getDescriptorsFieldName(property, pageClass) {
   if (property.startsWith('@')) {
@@ -268,7 +264,6 @@ export function getDescriptorsFieldName(property, pageClass) {
   return property;
 }
 
-// eslint-disable-next-line, sonarjs/cognitive-complexity
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '', getPConnect) {
   const queryFields = [];
   // Descriptors can be configured only for single selectionMode properties
@@ -363,12 +358,7 @@ export function prepareFilters(keys = [], data = {}, logicOperator = '') {
   const filterConditions = {};
   keys.forEach((key, index) => {
     const value = data[key];
-    let filterExpression = {};
-    if (value) {
-      filterExpression = getFilterExpression(key, value, 'EQ');
-    } else {
-      filterExpression = getFilterExpression(key);
-    }
+    const filterExpression = value ? getFilterExpression(key, value, 'EQ') : getFilterExpression(key);
     filterConditions[`T${index + 1}`] = filterExpression;
 
     if (index + 1 !== keys.length) {
@@ -646,7 +636,7 @@ export function getLeafValue(data, fieldName, fieldSeparator) {
   return getLeafValue(data[first], rest.join(fieldSeparator));
 }
 
-// Builds a uniquely identifyable aggregation/calculation ID for sending to the server.
+// Builds a uniquely identifiable aggregation/calculation ID for sending to the server.
 export const buildAggOrCalcId = (columnId, functionName) => {
   // Server does not support agg/calc ID's containing special chars, but Association ID's can contain - and _
   // AND the data_views API uses : to separate the assoc ID and the field ID

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/textformat-utils.tsx.mustache

@@ -48,7 +48,6 @@ const TableImage = imageProps => {
     propUrlLabel
   } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -75,7 +74,7 @@ const TableImage = imageProps => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -140,7 +139,7 @@ export const urlFormatter = (value, options) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if (
     (displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) &&
     (urlLabel !== '' || propUrlLabel !== '')

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/utils.ts.mustache

@@ -1,13 +1,13 @@
 import { useEffect, useRef } from 'react';
-import equal from 'fast-deep-equal';
-import get from 'lodash.get';
+import isEqual from 'lodash/isEqual.js';
+import get from 'lodash/get.js';
 
 import { getFieldNameFromEmbeddedFieldName } from './embed-utils';
 
 import { buildColumnForDisplayValue, setValuesToPropertyList } from './index';
 
 export function usePaginate() {
-  const paginatationProperties = useRef({
+  const paginationProperties = useRef({
     startIndex: 0,
     endIndex: 50,
     matchPosition: '',
@@ -18,21 +18,21 @@ export function usePaginate() {
     // clean up on unmount
     return () => {
       // @ts-ignore
-      paginatationProperties.current = null;
+      paginationProperties.current = null;
     };
   }, []);
 
   const getInitialPaginatedRecords = (totalRecords: any, matchPosition: string) => {
     const initialPaginatedRecords = totalRecords.slice(0, 50);
-    paginatationProperties.current.startIndex = 0;
-    paginatationProperties.current.endIndex = 50;
-    paginatationProperties.current.matchPosition = matchPosition;
-    paginatationProperties.current.totalRecords = totalRecords;
+    paginationProperties.current.startIndex = 0;
+    paginationProperties.current.endIndex = 50;
+    paginationProperties.current.matchPosition = matchPosition;
+    paginationProperties.current.totalRecords = totalRecords;
     return initialPaginatedRecords;
   };
 
   const positionMatches = (text: string, searchText: string) => {
-    switch (paginatationProperties.current.matchPosition) {
+    switch (paginationProperties.current.matchPosition) {
       case 'start':
         return text.toLowerCase().startsWith(searchText.toLowerCase());
       case 'contains':
@@ -44,27 +44,27 @@ export function usePaginate() {
 
   const fetchData = (searchText: string, onScroll: boolean, columns = []) => {
     let progressivePaginatedRecords;
-    paginatationProperties.current.startIndex += 50;
-    paginatationProperties.current.endIndex += 50;
+    paginationProperties.current.startIndex += 50;
+    paginationProperties.current.endIndex += 50;
 
     if (searchText === '' || searchText === undefined || searchText === null) {
       // paginate on entire resultset
-      progressivePaginatedRecords = paginatationProperties.current.totalRecords.slice(
-        paginatationProperties.current.startIndex,
-        paginatationProperties.current.endIndex
+      progressivePaginatedRecords = paginationProperties.current.totalRecords.slice(
+        paginationProperties.current.startIndex,
+        paginationProperties.current.endIndex
       );
     } else if (onScroll) {
       // paginate on filtered resultset
       // @ts-ignore
-      progressivePaginatedRecords = paginatationProperties.current.filteredRecords.slice(
-        paginatationProperties.current.startIndex,
-        paginatationProperties.current.endIndex
+      progressivePaginatedRecords = paginationProperties.current.filteredRecords.slice(
+        paginationProperties.current.startIndex,
+        paginationProperties.current.endIndex
       );
     } else {
       // @ts-ignore
       const searchInSecondaryItem = columns.some(e => e.secondary && e.useForSearch);
       // Filter the items and paginate on filtered resultset
-      const filteredRecords = paginatationProperties.current.totalRecords.filter(
+      const filteredRecords = paginationProperties.current.totalRecords.filter(
         filteritem =>
           // @ts-ignore
           (filteritem.primary && positionMatches(filteritem.primary, searchText)) ||
@@ -77,32 +77,32 @@ export function usePaginate() {
             filteritem.secondary.find(item => positionMatches(item, searchText)))
       );
       progressivePaginatedRecords = filteredRecords.slice(
-        paginatationProperties.current.startIndex,
-        paginatationProperties.current.endIndex
+        paginationProperties.current.startIndex,
+        paginationProperties.current.endIndex
       );
       // @ts-ignore
-      paginatationProperties.current.filteredRecords = filteredRecords;
+      paginationProperties.current.filteredRecords = filteredRecords;
     }
     return progressivePaginatedRecords;
   };
 
   const resetIndexes = () => {
-    paginatationProperties.current.startIndex = -50;
-    paginatationProperties.current.endIndex = 0;
+    paginationProperties.current.startIndex = -50;
+    paginationProperties.current.endIndex = 0;
   };
 
   const hasMoreResults = (searchText: string) => {
     if (searchText === '' || searchText === undefined || searchText === null) {
       return (
-        paginatationProperties.current.startIndex + 50 <
-        paginatationProperties.current.totalRecords.length
+        paginationProperties.current.startIndex + 50 <
+        paginationProperties.current.totalRecords.length
       );
     }
     return (
       // @ts-ignore
-      paginatationProperties.current.startIndex + 50 <
+      paginationProperties.current.startIndex + 50 <
       // @ts-ignore
-      paginatationProperties.current.filteredRecords.length
+      paginationProperties.current.filteredRecords.length
     );
   };
 
@@ -117,7 +117,7 @@ export function usePaginate() {
 export function useDeepMemo(memoFn: any, key: any) {
   const ref = useRef();
   // @ts-ignore
-  if (!ref.current || !equal(key, ref.current.key)) {
+  if (!ref.current || !isEqual(key, ref.current.key)) {
     // @ts-ignore
     ref.current = { key, value: memoFn() };
   }

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -117,11 +117,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   if (placeholder) {
     items.push(
       <RadioButton
+        key={`${fullReference}.EMPTY`}
         {...autoFocusProp}
         defaultChecked={value === ''}
         id={`${fullReference}.EMPTY`}
         value=''
-        key={`${fullReference}.EMPTY`}
         label={placeholder}
         name={fullReference}
       />
@@ -135,11 +135,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
     items.push(
       <RadioButton
+        key={`${fullReference}.${item.key}`}
         {...autoFocusProp}
         checked={`${value}` === `${item.key}`}
         id={`${fullReference}.${item.key}`}
         value={item.key}
-        key={`${fullReference}.${item.key}`}
         label={isDatapageLocale
             ? pConn
                 .getLocalizationService()

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/textformat-utils.tsx.mustache

@@ -33,7 +33,6 @@ const isImage = (url) => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
 const TableImage = (imageProps) => {
   const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -60,7 +59,7 @@ const TableImage = (imageProps) => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -125,7 +124,7 @@ export const urlFormatter = (value, options) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if (
     (displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) &&
     (urlLabel !== '' || propUrlLabel !== '')

package/src/tasks/create/templates/Constellation/Field/Text/index.tsx.mustache

@@ -1,8 +1,6 @@
 import {
   Input,
-  FieldValueList,
-  Text,
-  EmailDisplay,
+      EmailDisplay,
   PhoneDisplay,
   URLDisplay,
   withConfiguration
@@ -73,7 +71,7 @@ export const textFormatter = (formatter: string, value: string) => {
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
-  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
+  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -86,43 +84,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     actions.updateFieldValue(propName, updatedValue);
   };
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-        <FieldValueList
-          variant={hideLabel ? 'stacked' : variant}
-          data-testid={testId}
-          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-        />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    const isValDefined = typeof value !== 'undefined' && value !== '';
-    const val = isValDefined ? (
-      <Text variant='h1' as='span'>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-        <FieldValueList
-          variant='stacked'
-          data-testid={testId}
-          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
-        />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Text-Email/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay, withConfiguration } from '@pega/cosmos-react-core';
+import { Input, EmailDisplay, URLDisplay, PhoneDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
@@ -85,7 +85,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     isTableFormatter = false,
     hasSuggestions = false
   } = props;
@@ -123,46 +122,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     displayComp = <EmailDisplay value={value} displayText={inputValue} variant='link' />;
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[
-          {
-            id: '2',
-            name: hideLabel ? '' : label,
-            value: (
-              <Text variant='h1' as='span'>
-                {displayComp}
-              </Text>
-            )
-          }
-        ]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/src/tasks/create/templates/Constellation/Field/Text-Input/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
+import { Input, FieldValueList, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
@@ -87,7 +87,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     additionalProps = {},
     displayMode,
     displayAsStatus,
-    variant = 'inline',
     hasSuggestions = false,
     isTableFormatter = false
   } = props;
@@ -138,43 +137,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    const isValDefined = typeof value !== 'undefined' && value !== '';
-    const val = isValDefined ? (
-      <Text variant='h1' as='span'>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   const handleChange = (event: any) => {
     if (hasSuggestions) {

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
+import { TextArea as CosmosTextArea, ParagraphDisplay, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -87,7 +87,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     fieldMetadata = {},
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     isTableFormatter = false,
     hasSuggestions = false
   } = props;
@@ -120,45 +119,18 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let displayComp = <ParagraphDisplay value={value || undefined} />;
     if (isTableFormatter && formatExists(formatter) && formatter !== 'TextInput') {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    const isValDefined = typeof value !== 'undefined' && value !== '';
-    const val = isValDefined ? (
-      <Text variant='h1' as='span'>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.tsx.mustache

@@ -3,9 +3,7 @@ import {
   PhoneInput as CosmosPhone,
   getPhoneNumberParts,
   PhoneDisplay,
-  FieldValueList,
-  Text,
-  EmailDisplay,
+      EmailDisplay,
   URLDisplay,
   withConfiguration
 } from '@pega/cosmos-react-core';
@@ -98,7 +96,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     isTableFormatter = false,
     hasSuggestions = false
   } = props;
@@ -157,46 +154,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     displayComp = <PhoneDisplay value={value} variant='link' />;
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[
-          {
-            id: '2',
-            name: hideLabel ? '' : label,
-            value: (
-              <Text variant='h1' as='span'>
-                {displayComp}
-              </Text>
-            )
-          }
-        ]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);