@zohodesk/library-platform 1.1.10-temp-1 → 1.1.11

package/es/platform/zlist/adapters/presenters/SelectionTranslator.js

@@ -13,7 +13,8 @@ export default function SelectionTranslator(state) {
     columnChooserConfig,
     selectionConfig,
     moduleName,
-    instanceName
+    instanceName,
+    textOverflowConfig
   } = properties;
   const {
     context
@@ -21,15 +22,19 @@ export default function SelectionTranslator(state) {
   const {
     zfield,
     selection,
-    columnChooser
+    columnChooser,
+    textOverflow
   } = behaviours;
   const {
     selected,
     hasAllSelected
   } = selection;
   const availableFields = zfield.fields;
-  const columnChooserProps = getColumnChooserProps(columnChooser, availableFields, context, moduleName);
-  const clientActions = generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps);
+  const columnChooserProps = getColumnChooserProps(columnChooser, availableFields, context, moduleName, columnChooserConfig);
+  const clientActions = generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps, {
+    isEnabled: textOverflowConfig.isEnabled,
+    mode: textOverflow.mode
+  });
   const contextAppliedActions = ClientActionsTranslator.transform(clientActions, instanceName, moduleName, context);
   return {
     selected,
@@ -38,12 +43,14 @@ export default function SelectionTranslator(state) {
   };
 }
 
-function generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps) {
+function generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps, textOverflowConfig) {
   const clientActions = [];
 
   if (selectionConfig.isEnabled) {
     if (columnChooserConfig.isEnabled) {
-      const columnChooserAction = DefaultClientActions.createColumnChooserAction(columnChooserProps);
+      const columnChooserAction = DefaultClientActions.createColumnChooserAction({ ...columnChooserProps,
+        textOverflowConfig
+      });
       clientActions.push(columnChooserAction);
     } else if (selectionConfig.isSelectAllEnabled) {
       const selectAllColumnsAction = DefaultClientActions.createSelectAllAction(hasAllSelected);
@@ -58,6 +65,7 @@ function getColumnChooserProps(columnChooser) {
   let availableFields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   let context = arguments.length > 2 ? arguments[2] : undefined;
   let moduleName = arguments.length > 3 ? arguments[3] : undefined;
+  let columnChooserConfig = arguments.length > 4 ? arguments[4] : undefined;
   const {
     searchText: searchString,
     fieldsOrder,
@@ -65,8 +73,11 @@ function getColumnChooserProps(columnChooser) {
     isMaxSelectionReached
   } = columnChooser;
   const fieldMap = mapFieldsToObject(availableFields);
-  const disabledFieldName = context.modules?.find(module => module.apiKey === moduleName)?.nameField;
-  const columnChooserOptions = fieldsOrder.map(fieldName => getOption(fieldMap[fieldName], !!selected[fieldName], disabledFieldName === fieldName));
+  const moduleConfig = context.modules?.find(module => module.apiKey === moduleName);
+  const disabledFieldName = moduleConfig?.nameField;
+  const restrictedFields = columnChooserConfig?.fieldRestrictionConfig || [];
+  const hasRestrictions = Array.isArray(restrictedFields) && restrictedFields.length > 0;
+  const columnChooserOptions = fieldsOrder.map(fieldName => getOption(fieldMap[fieldName], restrictedFields.includes(fieldName) || !!selected[fieldName], restrictedFields.includes(fieldName) || !hasRestrictions && disabledFieldName === fieldName));
   return {
     options: columnChooserOptions,
     searchString,

package/es/platform/zlist/adapters/presenters/TableTranslator.js

@@ -33,13 +33,16 @@ export default class TableTranslator {
     const {
       localStorage: localStorageBehaviour,
       columnResizer,
-      keyboardControls
+      keyboardControls,
+      textOverflow
     } = behaviours;
     const {
       resizeConfig,
       preferences,
       keyboardControlsConfig,
-      nameFieldsConfig
+      nameFieldsConfig,
+      textOverflowConfig,
+      recordReadStatusConfig
     } = properties;
     const {
       modules
@@ -94,12 +97,18 @@ export default class TableTranslator {
     const isLoading = !!(isRecordsFetching || isAvailableFieldsFetching || isSelectedFieldsFetching);
     const fields = selectedFields?.map(selectedField => availableFields?.find(availableField => availableField.name === selectedField)).filter(f => f != undefined);
     const newClientActions = DefaultClientActions.createSortActions(fields, clientActions || EMPTY_ARRAY);
+    const actionsToMap = [...newClientActions];
+
+    if (recordReadStatusConfig?.isEnabled) {
+      actionsToMap.push(DefaultClientActions.createMarkAsReadAction(), DefaultClientActions.createMarkAsUnReadAction());
+    }
+
     const {
       headerActions,
       fieldActions,
       rowActions,
       noLocation
-    } = mapClientActions(newClientActions || EMPTY_ARRAY);
+    } = mapClientActions(actionsToMap);
     const isRowClickable = noLocation.some(action => action.uiComponentMapping.eventMappings.some(mapping => mapping.sourceEvent === TableListConstants.TABLE_LIST_ROW_CLICKED));
     const rowCursor = isRowClickable ? RowCursor.Pointer : RowCursor.Default;
     const rowActionsWidth = preferences?.rowActions?.width;
@@ -111,8 +120,12 @@ export default class TableTranslator {
     const localStorageFieldWidths = fallbackToDefault(localStorageBehaviour?.[moduleName]?.[viewId]?.modifiedWidths, EMPTY_OBJECT);
     const modifiedWidths = calculateFieldWidths(fields, localStorageFieldWidths, preferences);
     const recordsForDisplay = isRecordsShouldBeEmptied ? EMPTY_ARRAY : records;
+    const textOverflowData = {
+      isEnabled: textOverflowConfig.isEnabled,
+      mode: textOverflow.mode
+    };
     const headersTranslator = new HeadersTranslator(fields, headerActions, context, modifiedWidths, sortBy, records, instanceName, moduleName);
-    const rowsTranslator = new RowsTranslator(recordsForDisplay, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, moduleName, nameFieldsConfig); // const actionTranslator = new ClientActionsTranslator(clientActions, records, fields, pageContext);
+    const rowsTranslator = new RowsTranslator(recordsForDisplay, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowData, moduleName, nameFieldsConfig, recordReadStatusConfig); // const actionTranslator = new ClientActionsTranslator(clientActions, records, fields, pageContext);
     // const translators = [headersTranslator.getTranslator(), rowsTranslator.getTranslator(), actionTranslator.getTranslator()];
 
     const translators = [headersTranslator.getTranslator(), rowsTranslator.getTranslator()];
@@ -141,6 +154,7 @@ export default class TableTranslator {
           columnWidth: typeof rowActionsWidth === 'number' ? rowActionsWidth : ColumnWidth.XSmall
         },
         keyboardControlsConfig,
+        textOverflowConfig: textOverflowData,
         isLoading,
         isReOrderLoading,
         emptyStateUiType: componentMapping.emptyState || '',
@@ -158,7 +172,7 @@ function mapClientActions(clientActions) {
   const allowedActingLocations = ['header_actions', 'field_actions', 'row_actions', null];
   clientActions.forEach(action => {
     if (!allowedActingLocations.includes(action.location)) {
-      console.warn('Client action without location:', action.location);
+      __DEVELOPMENT__ && console.warn('Client action without location:', action.location);
     }
   });
   return {

package/es/platform/zlist/adapters/presenters/translators/ColumnTranslator.js

@@ -17,7 +17,7 @@ function getLookupUrlConstructions(_ref) {
   return `/agent/${orgName}/${departmentName}/${lookupModuleName}/details/${value.id}`;
 }
 
-function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, moduleName, nameFieldsConfig) {
+function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig) {
   const {
     isCustomField,
     name,
@@ -29,7 +29,7 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
   const fieldEntry = fieldComponentMapping[name];
 
   if (typeof fieldEntry == 'string') {
-    console.warn(`The string format for componentMapping will soon be deprecated. Please update to the new JSON format. REF : ${JSON.stringify(fieldEntry)}`);
+    __DEVELOPMENT__ && console.warn(`The string format for componentMapping will soon be deprecated. Please update to the new JSON format. REF : ${JSON.stringify(fieldEntry)}`);
   }
 
   let tempValue = undefined;
@@ -54,7 +54,7 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
   const fieldTranslator = nameFieldsConfig.isEnabled && nameFieldTypes.includes(field.type) && moduleApiKeyCheck ? FieldTranslators['NameField'] : FieldTranslators[type];
 
   if (!fieldTranslator) {
-    console.error(`Field type ${type} not supported`);
+    __DEVELOPMENT__ && console.error(`Field type ${type} not supported`);
     return EmptyViewModel(name);
   }
 
@@ -71,19 +71,29 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
     });
   }
 
+  const translatorArgs = {
+    field,
+    value: tempValue ? tempValue : value,
+    appendToActionPayload: {
+      recordId: record.id
+    },
+    context,
+    preferences,
+    moduleName,
+    constructUrl: nameFieldsConfig.constructUrl,
+    isPreventDefault: nameFieldsConfig.isPreventDefault || false,
+    textOverflowMode: textOverflowConfig.mode || 'clip'
+  };
+
+  if (recordReadStatusConfig?.isEnabled) {
+    translatorArgs.isRead = record.isRead;
+  } else {
+    translatorArgs.isRead = true;
+  }
+
   const viewModel = {
     actions,
-    ...fieldTranslator({
-      field,
-      value: tempValue ? tempValue : value,
-      appendToActionPayload: {
-        recordId: record.id
-      },
-      context,
-      preferences,
-      moduleName,
-      constructUrl: nameFieldsConfig.constructUrl
-    })
+    ...fieldTranslator(translatorArgs)
   };
 
   if (fieldEntry && typeof fieldEntry === 'object') {

package/es/platform/zlist/adapters/presenters/translators/Row.js

@@ -11,15 +11,17 @@ export default function RowTranslator(_ref) {
     context,
     preferences,
     instanceName,
+    textOverflowConfig,
     moduleName,
-    nameFieldsConfig
+    nameFieldsConfig,
+    recordReadStatusConfig
   } = _ref;
   const actions = ClientActionsTranslator.transform(rowActions, instanceName, moduleName, { ...context,
     record
   });
   return {
     id: record.id,
-    columns: fields.map(field => ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, moduleName, nameFieldsConfig)),
+    columns: fields.map(field => ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig)),
     rowActionLocation: {
       type: rowActionsUiType,
       actions

package/es/platform/zlist/adapters/presenters/translators/RowsTranslator.js

@@ -1,6 +1,6 @@
 import RowTranslator from "./Row";
 export default class RowsTranslator {
-  constructor(records, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, moduleName, nameFieldsConfig) {
+  constructor(records, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig) {
     this.records = records;
     this.fields = fields;
     this.rowActions = rowActions;
@@ -10,8 +10,10 @@ export default class RowsTranslator {
     this.rowActionsUiType = rowActionsUiType;
     this.fieldActions = fieldActions;
     this.instanceName = instanceName;
+    this.textOverflowConfig = textOverflowConfig;
     this.moduleName = moduleName;
     this.nameFieldsConfig = nameFieldsConfig;
+    this.recordReadStatusConfig = recordReadStatusConfig;
     this.pipe = this.pipe.bind(this);
   }
 
@@ -30,8 +32,10 @@ export default class RowsTranslator {
       context: this.context,
       preferences: this.preferences,
       instanceName: this.instanceName,
+      textOverflowConfig: this.textOverflowConfig,
       moduleName: this.moduleName,
-      nameFieldsConfig: this.nameFieldsConfig
+      nameFieldsConfig: this.nameFieldsConfig,
+      recordReadStatusConfig: this.recordReadStatusConfig
     }));
   }
 

package/es/platform/zlist/adapters/presenters/translators/fields/BooleanFieldTranslator.js

@@ -6,7 +6,9 @@ const BooleanFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -23,7 +25,9 @@ const BooleanFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.CheckboxField,
     name,
     appendToActionPayload,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/CurrencyFieldTranslator.js

@@ -7,7 +7,9 @@ const CurrencyFieldTranslator = _ref => {
     value,
     appendToActionPayload,
     context,
-    preferences
+    preferences,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -23,7 +25,9 @@ const CurrencyFieldTranslator = _ref => {
     name,
     currencyLocale: prefCurrencyLocale || contextCurrencyLocale,
     currencySymbol: prefCurrencySymbol || contextCurrencySymbol,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/DateFieldTranslator.js

@@ -6,7 +6,9 @@ const DateFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const DateFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.DateField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/DateTimeFieldTranslator.js

@@ -6,7 +6,9 @@ const DateTimeFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const DateTimeFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.DateTimeField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/DecimalFieldTranslator.js

@@ -6,7 +6,9 @@ const DecimalFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const DecimalFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.DecimalField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/EmailFieldTranslator.js

@@ -5,7 +5,9 @@ const EmailFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -15,7 +17,9 @@ const EmailFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.EmailField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/FormulaFieldTranslator.js

@@ -7,7 +7,9 @@ const FormulaFieldTranslator = _ref => {
     value,
     appendToActionPayload,
     context,
-    preferences
+    preferences,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -34,7 +36,9 @@ const FormulaFieldTranslator = _ref => {
       currencyLocale: prefCurrencyLocale || contextCurrencyLocale,
       currencySymbol: prefCurrencySymbol || contextCurrencySymbol
     }),
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/LookUpFieldTranslator.js

@@ -5,7 +5,9 @@ const LookUpFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -21,12 +23,14 @@ const LookUpFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.LookUpField,
     appendToActionPayload,
     name,
+    isRead,
     value: {
       id,
       name: nameValue,
       photoURL,
       url
-    }
+    },
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/MultiLineFieldTranslator.js

@@ -1,12 +1,14 @@
 // import FieldModel from '@platform/zfield/entities/interfaces/FieldModel';
 import FieldTypes from "../../../../../../cc/fields/field/Types";
-import MultiLineFieldModel from "../../../../../../cc/fields/multi-select/Model";
+import MultiLineFieldModel from "../../../../../../cc/fields/multi-line/Model";
 
 const MultiLineFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const MultiLineFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.MultiLineField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/MultiSelectFieldTranslator.js

@@ -7,7 +7,9 @@ const MultiSelectFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -18,7 +20,7 @@ const MultiSelectFieldTranslator = _ref => {
   const updatedValue = value.split(';').map(item => item === '' ? '-None-' : item);
 
   if (['colored', 'ColorCoded'].includes(subType)) {
-    return ColouredMultiSelectFieldTranslator(field, updatedValue, appendToActionPayload);
+    return ColouredMultiSelectFieldTranslator(field, updatedValue, appendToActionPayload, textOverflowMode, isRead);
   }
 
   return MultiListFieldModel({
@@ -26,13 +28,15 @@ const MultiSelectFieldTranslator = _ref => {
     appendToActionPayload,
     name,
     options: pickListValues,
-    value: updatedValue
+    isRead,
+    value: updatedValue,
+    textOverflowMode
   });
 };
 
 export default MultiSelectFieldTranslator;
 
-const ColouredMultiSelectFieldTranslator = (field, value, appendToActionPayload) => {
+const ColouredMultiSelectFieldTranslator = (field, value, appendToActionPayload, textOverflowMode, isRead) => {
   const {
     uiType,
     name,
@@ -45,6 +49,8 @@ const ColouredMultiSelectFieldTranslator = (field, value, appendToActionPayload)
     options: pickListValues.map(option => ({ ...option,
       colorCode: option.colorCode || ''
     })),
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };

package/es/platform/zlist/adapters/presenters/translators/fields/NameFieldTranslator.js

@@ -21,7 +21,10 @@ const NameFieldTranslator = _ref2 => {
     appendToActionPayload,
     context,
     moduleName,
-    constructUrl
+    constructUrl,
+    isPreventDefault,
+    textOverflowMode,
+    isRead
   } = _ref2;
   const {
     uiType,
@@ -30,6 +33,7 @@ const NameFieldTranslator = _ref2 => {
   let nameFieldValue = undefined;
   nameFieldValue = typeof value !== 'object' ? {
     value,
+    isPreventDefault,
     id: appendToActionPayload.recordId
   } : value;
   nameFieldValue.url = constructUrl ? constructUrl({
@@ -45,7 +49,9 @@ const NameFieldTranslator = _ref2 => {
     uiType: FieldTypes.PrimaryField,
     appendToActionPayload,
     name,
-    value: nameFieldValue
+    isRead,
+    value: nameFieldValue,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/NumberFieldTranslator.js

@@ -6,7 +6,9 @@ const NumberLineFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const NumberLineFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.NumberField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/PercentageFieldTranslator.js

@@ -6,7 +6,9 @@ const PercentageFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const PercentageFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.PercentageField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/PhoneFieldTranslator.js

@@ -6,7 +6,9 @@ const PhoneFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -16,7 +18,9 @@ const PhoneFieldTranslator = _ref => {
     uiType: uiType || FieldTypes.PhoneField,
     appendToActionPayload,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 

package/es/platform/zlist/adapters/presenters/translators/fields/PickListFieldTranslator.js

@@ -7,7 +7,9 @@ const PickListFieldTranslator = _ref => {
   let {
     field,
     value,
-    appendToActionPayload
+    appendToActionPayload,
+    textOverflowMode,
+    isRead
   } = _ref;
   const {
     uiType,
@@ -17,7 +19,7 @@ const PickListFieldTranslator = _ref => {
   } = field;
 
   if (['colored', 'ColorCoded'].includes(subType)) {
-    return ColouredPickListFieldTranslator(field, value, appendToActionPayload);
+    return ColouredPickListFieldTranslator(field, value, appendToActionPayload, textOverflowMode, isRead);
   }
 
   return PickListFieldModel({
@@ -25,13 +27,15 @@ const PickListFieldTranslator = _ref => {
     appendToActionPayload,
     options: pickListValues,
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };
 
 export default PickListFieldTranslator;
 
-const ColouredPickListFieldTranslator = (field, value, appendToActionPayload) => {
+const ColouredPickListFieldTranslator = (field, value, appendToActionPayload, textOverflowMode, isRead) => {
   const {
     uiType,
     name,
@@ -44,6 +48,8 @@ const ColouredPickListFieldTranslator = (field, value, appendToActionPayload) =>
       colorCode: option.colorCode || ''
     })),
     name,
-    value
+    isRead,
+    value,
+    textOverflowMode
   });
 };