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

package/src/tasks/create/templates/Constellation/Field/Date/date.ts.mustache

@@ -153,7 +153,7 @@ export const getDayJSObject = text => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = time => {
-  let relativetime = '';
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {
@@ -277,7 +277,7 @@ export const datetimeFireChangeBlurEvents = (
   if (errorState) {
     pConn.getValidationApi().validate(errorState);
   }
-  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  // BUG-640834 In errorState persist old values avoiding store update & re-render.
   else {
     if (formattedValue !== actualValue) {
       actions.updateFieldValue(propName, formattedValue);

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
+import { DateInput, DateTimeDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
@@ -68,7 +68,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     showAsFormattedText = false,
     additionalProps = {},
     displayMode,
-    variant = 'inline',
     hasSuggestions = false
    } = props;
 
@@ -147,7 +146,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     })
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'STACKED_LARGE_VAL' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
      let variantValue = "date";
      let formatValue = "long";
      if (pConn && pConn.getConfigProps()){
@@ -177,30 +176,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
       case 'DISPLAY_ONLY': {
         return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
-      case "LABELS_LEFT" : {
-        return (
-          <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>
-
-        );
-      }
-      case "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>
-
-        );
-      }
       // no default
     }
   }

package/src/tasks/create/templates/Constellation/Field/DateTime/date-utils.ts.mustache

@@ -62,7 +62,7 @@ export const getDayJSObject = (text: string) => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = (time: string) => {
-  let relativetime = "";
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {
@@ -190,7 +190,7 @@ export const datetimeFireChangeBlurEvents = (
   if (errorState) {
     pConn.getValidationApi().validate(errorState);
   }
-  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  // BUG-640834 In errorState persist old values avoiding store update & re-render.
   else{
     if (formattedValue !== actualValue) {
       actions.updateFieldValue(propName, formattedValue);

package/src/tasks/create/templates/Constellation/Field/DateTime/date.ts.mustache

@@ -105,7 +105,7 @@ export const getDayJSObject = (text) => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = (time) => {
-  let relativetime = "";
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {
@@ -233,7 +233,7 @@ export const datetimeFireChangeBlurEvents = (
   if (errorState) {
     pConn.getValidationApi().validate(errorState);
   }
-  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  // BUG-640834 In errorState persist old values avoiding store update & re-render.
   else{
     if (formattedValue !== actualValue) {
       actions.updateFieldValue(propName, formattedValue);

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
+import { DateTimeInput, DateTimeDisplay, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
@@ -72,7 +72,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     testId,
     additionalProps = {},
     displayMode,
-    variant = 'inline',
     hasSuggestions = false
   } = props;
   let { formatter } = props;
@@ -153,7 +152,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     });
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'STACKED_LARGE_VAL' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let variantValue = 'datetime' as DateTimeVariant;
     let formatValue = withSeconds ? 'long' : 'short' as DateTimeFormat;
 
@@ -184,38 +183,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
       case 'DISPLAY_ONLY': {
         return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
-      case 'LABELS_LEFT': {
-        return (
-          <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>
-        );
-      }
-      case '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>
-        );
-      }
       // no default
     }
   }

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
+import { NumberInput, NumberDisplay, CurrencyDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -51,7 +51,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     formatter = 'defaultDecimal',
     negative = 'minus-sign',
     notation = 'standard',
@@ -100,8 +99,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   let unit;
 
-  if (['DISPLAY_ONLY', 'LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode as string)) {
-    if (displayMode !== 'STACKED_LARGE_VAL' && isTableFormatter) {
+  if (displayMode === 'DISPLAY_ONLY') {
+    if (isTableFormatter) {
       showGroupSeparators = true;
       noOfFractionDigits = undefined;
       if (formatter === 'Currency-Code') {
@@ -163,38 +162,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       case 'DISPLAY_ONLY': {
         return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
-      case 'LABELS_LEFT': {
-        return (
-          <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>
-        );
-      }
-      case '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>
-        );
-      }
       // no default
     }
   }

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -3,9 +3,7 @@ import {
   CurrencyInput as CosmosCurrency,
   CurrencyDisplay,
   NumberDisplay,
-  FieldValueList,
-  Text,
-  useAfterInitialEffect,
+      useAfterInitialEffect,
   withConfiguration
 } from '@pega/cosmos-react-core';
 
@@ -71,7 +69,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     alwaysShowISOCode = false,
     displayMode,
     additionalProps = {},
-    variant,
     formatter = 'defaultCurrency',
     negative = 'minus-sign',
     notation = 'standard',
@@ -116,13 +113,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
 
   if (
-    displayMode === 'LABELS_LEFT' ||
-    displayMode === 'STACKED_LARGE_VAL' ||
+    displayMode === 'DISPLAY_ONLY' ||
+    displayMode === 'DISPLAY_ONLY' ||
     displayMode === 'DISPLAY_ONLY'
   ) {
     let displayComp;
     // let { showGroupSeparators = false } = props;
-    if (displayMode === 'LABELS_LEFT' && isTableFormatter) {
+    if (displayMode === 'DISPLAY_ONLY' && isTableFormatter) {
       noOfFractionDigits = undefined;
       showGroupSeparators = true;
       if (formatter === 'Currency-Code') {
@@ -194,38 +191,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       case 'DISPLAY_ONLY': {
         return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>) ;
       }
-      case 'LABELS_LEFT': {
-        return (
-          <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>
-        );
-      }
-      case '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>
-        );
-      }
       // no default
     }
   }

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -3,9 +3,7 @@ import {
   NumberInput,
   NumberDisplay,
   CurrencyDisplay,
-  FieldValueList,
-  Text,
-  withConfiguration
+      withConfiguration
 } from '@pega/cosmos-react-core';
 
 
@@ -62,7 +60,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     decimalPrecision,
     additionalProps = {},
     displayMode,
-    variant = 'inline',
     formatter,
     isTableFormatter = false,
     hasSuggestions = false
@@ -103,9 +100,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     setPercentageValue(value?.toString());
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let unit = 'percent';
-    let displayComp:any = null;
+    let displayComp:any;
 
     if (isTableFormatter) {
       switch (formatter) {
@@ -166,55 +163,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     <%={{ }}=%>     {{! revert delimiters for mustache }}
 
-    return displayMode === 'DISPLAY_ONLY' ? (
-      <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>
-    );
-  }
-
-  {{! pick new delimiters for mustache }}
-  {{=<% %>=}}
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    const displayComp = (
-      <NumberDisplay
-        value={percentageValue}
-        formattingOptions={{
-          fractionDigits: numberOfDecimals,
-          groupSeparators: showGroupSeparators
-        }}
-        unit='percent'
-      />
-    );
-
-  <%={{ }}=%>     {{! revert delimiters for mustache }}
-
     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>
-            )
-          }
-        ]}
-      />
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -14,8 +14,8 @@ import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)
-// Icons filename is kabab case (file-name), where as the icon you import is camel case (fileName)
-// Icons need to be registered (camel case), and then used (kabab case)
+// Icons filename is kebab case (file-name), where as the icon you import is camel case (fileName)
+// Icons need to be registered (camel case), and then used (kebab case)
 import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
 import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
 import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
@@ -165,7 +165,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     <div style={{ display: 'flex' }} data-testid={testId}>
       <Icon
         style={{ height: '1.5rem', width: '1.5rem' }}
-        // icon name is kabab case
+        // icon name is kebab case
         name='arrow-right'
         role='img'
         aria-label='arrow right'
@@ -184,7 +184,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       >
         <Icon
           style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
+          // icon name is kebab case
           name='list-number'
           role='img'
           aria-label='numbered list'
@@ -193,7 +193,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       <Link href={validUrl} variant='link' label={validUrl} icon>
         <Icon
           style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
+          // icon name is kebab case
           name='globe'
           role='img'
           aria-label='open link'

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
+import { NumberInput, NumberDisplay, Slider, CurrencyDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 
 import type { PConnFieldProps } from './PConnProps';
@@ -67,7 +67,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     step = 1,
     showTicks = true,
     additionalProps = {},
-    variant = 'inline',
     formatter = 'defaultInteger',
     negative = 'minus-sign',
     notation = 'standard',
@@ -122,7 +121,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
 
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
+  if (displayMode === 'DISPLAY_ONLY') {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -142,7 +141,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }
     }
 
-    if (isTableFormatter && displayMode === 'LABELS_LEFT') {
+    if (isTableFormatter && displayMode === 'DISPLAY_ONLY') {
       showGroupSeparators = true;
       noOfFractionDigits = undefined;
       if (formatter === 'Currency-Code') {
@@ -184,38 +183,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       case 'DISPLAY_ONLY': {
         return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
-      case 'LABELS_LEFT': {
-        return (
-          <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>
-        );
-      }
-      case '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>
-        );
-      }
       // no default
     }
   }

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, type Key } from 'react';
-import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
+import { Select, Option, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -124,7 +124,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     additionalProps = {},
     displayMode,
     onRecordChange,
-    variant = 'inline',
     fieldMetadata = {},
     isTableFormatter = false,
     hasSuggestions = false
@@ -222,11 +221,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   });
 
   const isDisplayModeEnabled =
-    displayMode === 'LABELS_LEFT' || displayMode === 'STACKED_LARGE_VAL' || displayMode === 'DISPLAY_ONLY';
+    displayMode === 'DISPLAY_ONLY';
   let firstOptionKey = '';
   let firstOptionValue = '';
   if (!placeholder && listSourceItems?.length > 0) {
-    // First option isn't going to change as long as placeholder is present. Incase placeholder is not there
+    // First option isn't going to change as long as placeholder is present. In case placeholder is not there
     // check for new option
     firstOptionKey = listSourceItems[0].key;
     firstOptionValue = listSourceItems[0].text || listSourceItems[0].value;
@@ -245,7 +244,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
   }, [firstOptionKey, firstOptionValue, placeholder, selectedLabel, value, propName, isDisplayModeEnabled, isMount, pConnect]);
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let displayComp = selectedLabel;
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, selectedLabel);
@@ -254,47 +253,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
     }
 
-    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') {
-    selectedLabel = selectedLabel === '' ? value : selectedLabel;
-    const isValDefined = typeof selectedLabel !== 'undefined' && selectedLabel !== '';
-    const val = isValDefined ? (
-      <Text variant='h1' as='span'>
-        {selectedLabel}
-      </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, pConnect, setStatus);
@@ -304,14 +269,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <Select
+      // @ts-ignore
+      key={getPConnect().getRawMetadata().config.value}
       {...additionalProps}
       label={label}
       labelHidden={hideLabel}
       info={validatemessage || helperText}
       status={status}
       data-testid={testId}
-      // @ts-ignore
-      key={getPConnect().getRawMetadata().config.value}
       value={value}
       disabled={disabled}
       required={required}

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/component-constants.ts

@@ -1,5 +1,5 @@
 export default {
   PROPERTY_REFERENCE: 'propertyRef',
   WORK_BASKET: 'workbasket',
-  WORK_QUEUE: 'workqueue'
+  WORK_QUEUE: 'workqueue',
 };

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

@@ -85,7 +85,6 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
   { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
   if (!value) return value;
   switch (type) {
@@ -129,7 +128,6 @@ function DateFormatter(
 export function format(value, options) {
   if (!value) return null;
   const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
   const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
   return formatDateTime(parseToDate(value), {
     t: translate,

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

@@ -64,7 +64,7 @@ export function updateMetaEmbeddedFieldID(metaFields: any[]) {
  * Description    -           Get the metadata for configured embedded fields
  * @ignore
  * @param {Set} configFields  Set of config fields
- * @param {string} classID    clasID of datapage
+ * @param {string} classID    classID of datapage
  * @returns {Array}           Metadata of configured embedded fields
  */
 export function getConfigEmbeddedFieldsMeta(configFields: any, classID: string) {