carbon-addons-iot-react 2.155.13 → 2.156.1

package/umd/carbon-addons-iot-react.js

@@ -136863,6 +136863,9 @@
 	    defaultFilterStringPlaceholdText: PropTypes__default["default"].string,
 	    downloadIconDescription: PropTypes__default["default"].string
 	  }),
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
 	  cardVariables: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func, PropTypes__default["default"].number, PropTypes__default["default"].bool])),
 
 	  /** default date format pattern that follows the dayjs formatting patterns */
@@ -140347,6 +140350,21 @@
 	  });
 	  return defaultTooltipDOM.innerHTML;
 	};
+	/**
+	 * Get translated label or title from i18n object, fallback to original if not found
+	 * @param {string} label - The label or title key to translate
+	 * @param {boolean} shouldUseTranslatedLabels - Flag to determine if translation should be used
+	 * @param {Object} i18n - The i18n object containing translations
+	 * @returns {string} - The translated label or original label if translation not found
+	 */
+
+	var getTranslatedLabel = function getTranslatedLabel(label, shouldUseTranslatedLabels, i18n) {
+	  if (!isEmpty(label) && shouldUseTranslatedLabels && i18n && i18n[label]) {
+	    return i18n[label];
+	  }
+
+	  return label;
+	};
 
 	function ownKeys$1F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -141843,7 +141861,8 @@
 	  overrides: undefined,
 	  type: null,
 	  data: null,
-	  content: null
+	  content: null,
+	  shouldUseTranslatedLabels: false
 	};
 	/** Dumb component that renders the card basics */
 
@@ -141852,7 +141871,7 @@
 
 	  var size = props.size,
 	      children = props.children,
-	      title = props.title,
+	      titleProp = props.title,
 	      subtitleProp = props.subtitle,
 	      hasTitleWrap = props.hasTitleWrap;
 	      props.layout;
@@ -141866,7 +141885,7 @@
 	      error = props.error,
 	      hideHeader = props.hideHeader,
 	      id = props.id,
-	      tooltip = props.tooltip,
+	      tooltipProp = props.tooltip,
 	      titleTextTooltip = props.titleTextTooltip,
 	      timeRange = props.timeRange,
 	      timeRangeOptions = props.timeRangeOptions,
@@ -141890,9 +141909,13 @@
 	      type = props.type,
 	      data = props.data,
 	      content = props.content,
-	      others = objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content"]); // TODO: remove once final version of range prop is supported
+	      shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
+	      others = objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "shouldUseTranslatedLabels"]); // Get translated title if shouldUseTranslatedLabels is true
 
 
+	  var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+	  var tooltip = getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n); // TODO: remove once final version of range prop is supported
+
 	  React$1.useEffect(function () {
 	    if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
 	      warning_1(false, 'The Card components availableActions.range is an experimental property and may be subject to change.') ;
@@ -142388,6 +142411,13 @@
 	        "computed": false
 	      },
 	      "required": false
+	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "required": false
 	    }
 	  },
 	  "composes": ["../../constants/CardPropTypes"]
@@ -172883,6 +172913,10 @@
 	  isEditable: PropTypes__default["default"].bool,
 	  layout: PropTypes__default["default"].oneOf(Object.values(CARD_LAYOUTS)),
 	  locale: PropTypes__default["default"].string,
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+	  i18n: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
 	  renderIconByName: PropTypes__default["default"].func,
 
 	  /** Optional trend information */
@@ -172914,6 +172948,8 @@
 	  locale: 'en',
 	  customFormatter: null,
 	  isEditable: false,
+	  shouldUseTranslatedLabels: false,
+	  i18n: {},
 	  testId: 'attribute',
 	  onValueClick: null
 	};
@@ -172939,6 +172975,8 @@
 	      isEditable = _ref.isEditable,
 	      layout = _ref.layout,
 	      locale = _ref.locale,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+	      i18n = _ref.i18n,
 	      renderIconByName = _ref.renderIconByName,
 	      secondaryValue = _ref.secondaryValue,
 	      value = _ref.value,
@@ -172954,7 +172992,10 @@
 	  var matchingThreshold = thresholds ? isEditable ? thresholds[0] : matchedThreshold : null;
 	  var valueColor = matchingThreshold && matchingThreshold.icon === undefined ? matchingThreshold.color : null; // need to reduce the width size to fit multiple attributes when card layout is horizontal
 
-	  var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
+	  var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100; // Get translated label if shouldUseTranslatedLabels is true
+
+	  var displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+	  var displayUnitLabel = getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
 	  return /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: classnames$3("".concat(BEM_BASE, "-wrapper"), (_classnames = {}, defineProperty$d(_classnames, "".concat(BEM_BASE, "-wrapper--vertical"), layout === CARD_LAYOUTS.VERTICAL), defineProperty$d(_classnames, "".concat(BEM_BASE, "-wrapper--horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), _classnames)),
 	    style: {
@@ -172974,9 +173015,9 @@
 	  }) : null, tooltip ? /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.TooltipDefinition, {
 	    direction: "right",
 	    tooltipText: tooltip
-	  }, label) : /*#__PURE__*/React__default["default"].createElement("span", {
+	  }, displayLabel) : /*#__PURE__*/React__default["default"].createElement("span", {
 	    "data-testid": "".concat(testId, "-threshold-label")
-	  }, label)), /*#__PURE__*/React__default["default"].createElement("div", {
+	  }, displayLabel)), /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: "".concat(BEM_BASE)
 	  }, /*#__PURE__*/React__default["default"].createElement(ValueRenderer$1, {
 	    value: value,
@@ -172992,7 +173033,7 @@
 	    measurementUnitLabel: measurementUnitLabel,
 	    onClick: onValueClick
 	  }), /*#__PURE__*/React__default["default"].createElement(UnitRenderer$1, {
-	    unit: unit,
+	    unit: displayUnitLabel,
 	    testId: "".concat(testId, "-unit")
 	  })), !isNil(secondaryValue) ? /*#__PURE__*/React__default["default"].createElement("div", {
 	    "data-testid": "".concat(testId, "-secondary-value"),
@@ -173153,6 +173194,31 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
+	    "i18n": {
+	      "defaultValue": {
+	        "value": "{}",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "objectOf",
+	        "value": {
+	          "name": "any"
+	        }
+	      },
+	      "required": false,
+	      "description": ""
+	    },
 	    "testId": {
 	      "defaultValue": {
 	        "value": "'attribute'",
@@ -173288,7 +173354,10 @@
 	  title: PropTypes__default["default"].string,
 	  layout: PropTypes__default["default"].oneOf(['HORIZONTAL', 'VERTICAL']),
 	  locale: PropTypes__default["default"].string,
-	  isEditable: PropTypes__default["default"].bool
+	  isEditable: PropTypes__default["default"].bool,
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool
 	}, ValueContentPropTypes);
 
 	var defaultProps$17 = {
@@ -173297,6 +173366,7 @@
 	  layout: 'VERTICAL',
 	  locale: 'en',
 	  isEditable: false,
+	  shouldUseTranslatedLabels: false,
 	  dataState: null,
 	  values: null,
 	  fontSize: DEFAULT_FONT_SIZE,
@@ -173316,13 +173386,14 @@
 	      dataState = _ref.dataState,
 	      locale = _ref.locale,
 	      isEditable = _ref.isEditable,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      customFormatter = _ref.customFormatter,
 	      fontSize = _ref.fontSize,
 	      isNumberValueCompact = _ref.isNumberValueCompact,
 	      testId = _ref.testId,
 	      onAttributeClick = _ref.onAttributeClick,
 	      size = _ref.size,
-	      others = objectWithoutProperties(_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
+	      others = objectWithoutProperties(_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
 
 	  var attributeCount = content.attributes.length;
 	  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -173336,6 +173407,8 @@
 	      locale: locale,
 	      isEditable: isEditable,
 	      title: title,
+	      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
+	      i18n: others.i18n,
 	      renderIconByName: others.renderIconByName,
 	      value: determineValue(attribute.dataSourceId, values, attribute.dataFilter),
 	      secondaryValue: attribute.secondaryValue && _objectSpread$X(_objectSpread$X({}, attribute.secondaryValue), {}, {
@@ -173424,6 +173497,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "dataState": {
 	      "defaultValue": {
 	        "value": "null",
@@ -173515,7 +173599,8 @@
 	      testID = _ref.testID,
 	      testId = _ref.testId,
 	      onAttributeClick = _ref.onAttributeClick,
-	      others = objectWithoutProperties(_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick"]);
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+	      others = objectWithoutProperties(_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "shouldUseTranslatedLabels"]);
 
 	  var availableActions = _objectSpread$W({
 	    expand: false
@@ -173541,6 +173626,7 @@
 	    isResizable: isResizable,
 	    resizeHandles: resizeHandles,
 	    i18n: i18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    locale: locale,
 	    id: id,
 	    className: classnames$3((_classnames = {}, defineProperty$d(_classnames, "".concat(BASE_CLASS_NAME$2, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), defineProperty$d(_classnames, "".concat(BASE_CLASS_NAME$2, "__vertical"), layout === CARD_LAYOUTS.VERTICAL), _classnames)) // TODO: remove deprecated 'testID' in v3.
@@ -173560,7 +173646,9 @@
 	    values: values,
 	    isEditable: isEditable,
 	    fontSize: fontSize,
-	    isNumberValueCompact: isNumberValueCompact
+	    isNumberValueCompact: isNumberValueCompact,
+	    i18n: i18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels
 	  }, others)), resizeHandles);
 	};
 
@@ -173577,7 +173665,8 @@
 	  isNumberValueCompact: false,
 	  // TODO: fix this default in V3, so that cards are unique not inherited from the base Card
 	  testId: 'Card',
-	  onAttributeClick: null
+	  onAttributeClick: null,
+	  shouldUseTranslatedLabels: false
 	};
 	ValueCard.__docgenInfo = {
 	  "description": "This components responsibilities include:\nRendering the attribute groups\nDetermining the layout\ndetermines the data to render",
@@ -173653,6 +173742,13 @@
 	        "computed": false
 	      },
 	      "required": false
+	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "required": false
 	    }
 	  },
 	  "composes": ["../../constants/CardPropTypes"]
@@ -182552,6 +182648,9 @@
 	    thisYearLabel: PropTypes__default["default"].string
 	  }),
 
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
 	  /** if provided, returns an array of strings which are the timeRanges to be allowed
 	   * on each card
 	   * getValidTimeRanges(card, selectedDataItems)
@@ -182586,6 +182685,7 @@
 	    thisQuarterLabel: 'This quarter',
 	    thisYearLabel: 'This year'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  selectedDataItems: [],
 	  getValidTimeRanges: null,
 	  currentBreakpoint: 'xl',
@@ -182611,6 +182711,7 @@
 	  var cardConfig = _ref.cardConfig,
 	      _onChange = _ref.onChange,
 	      i18n = _ref.i18n,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      getValidTimeRanges = _ref.getValidTimeRanges,
 	      currentBreakpoint = _ref.currentBreakpoint,
 	      selectedDataItems = _ref.selectedDataItems,
@@ -182643,7 +182744,7 @@
 	        title: evt.target.value
 	      }));
 	    },
-	    value: title
+	    value: getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
 	  })), /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: "".concat(baseClassName, "--input")
 	  }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.TextArea, {
@@ -182655,7 +182756,7 @@
 	        description: evt.target.value
 	      }));
 	    },
-	    value: description
+	    value: getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)
 	  })), /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: "".concat(baseClassName, "--input")
 	  }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.Dropdown, {
@@ -182938,6 +183039,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "selectedDataItems": {
 	      "defaultValue": {
 	        "value": "[]",
@@ -184289,6 +184401,9 @@
 	    primaryButtonLabelText: PropTypes__default["default"].string,
 	    secondaryButtonLabelText: PropTypes__default["default"].string
 	  }),
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
 	  actions: DashboardEditorActionsPropTypes,
 
 	  /**
@@ -184343,6 +184458,7 @@
 	    secondaryButtonLabelText: 'Cancel',
 	    decimalPlacesLabel: 'Decimal places'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  editDataSeries: [],
 	  showEditor: false,
 	  setShowEditor: null,
@@ -184425,6 +184541,7 @@
 	      availableDimensions = _ref.availableDimensions,
 	      onChange = _ref.onChange,
 	      i18n = _ref.i18n,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      isLarge = _ref.isLarge,
 	      testId = _ref.testId,
 	      _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
@@ -184595,7 +184712,7 @@
 	          label: evt.target.value
 	        }));
 	      },
-	      value: editDataItem.label,
+	      value: getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
 	      helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
 	    })), hasColorDropdown &&
 	    /*#__PURE__*/
@@ -184642,7 +184759,7 @@
 	          unit: evt.target.value
 	        }));
 	      },
-	      value: editDataItem.unit
+	      value: getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)
 	    })), hasDecimalPlacesDropdown && /*#__PURE__*/React__default["default"].createElement("div", {
 	      className: "".concat(baseClassName, "--input-group--item-end")
 	    }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.Dropdown, {
@@ -184729,7 +184846,7 @@
 	      },
 	      columnType: editDataItem.columnType || editDataItem.type
 	    }));
-	  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, onAddAggregations, selectedDimensionFilter, setEditDataItem, testId, type]);
+	  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, onAddAggregations, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, testId, type]);
 	  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showEditor && /*#__PURE__*/React__default["default"].createElement("div", {
 	    className: "".concat(baseClassName, "--modal-wrapper")
 	  }, /*#__PURE__*/React__default["default"].createElement(ComposedModal$1, {
@@ -184959,6 +185076,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "editDataSeries": {
 	      "defaultValue": {
 	        "value": "[]",
@@ -185806,6 +185934,9 @@
 	    incrementNumberText: PropTypes__default["default"].string,
 	    decrementNumberText: PropTypes__default["default"].string
 	  }),
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
 	  translateWithId: PropTypes__default["default"].func.isRequired,
 	  actions: DashboardEditorActionsPropTypes
 	};
@@ -185839,6 +185970,7 @@
 	    incrementNumberText: 'Increment number',
 	    decrementNumberText: 'Decrement number'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  getValidDataItems: null,
 	  dataItems: [],
 	  selectedDataItems: [],
@@ -185940,6 +186072,7 @@
 	      selectedTimeRange = _ref2.selectedTimeRange,
 	      availableDimensions = _ref2.availableDimensions,
 	      i18n = _ref2.i18n,
+	      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
 	      dataSeriesItemLinks = _ref2.dataSeriesItemLinks,
 	      translateWithId = _ref2.translateWithId,
 	      actions = _ref2.actions;
@@ -186081,7 +186214,7 @@
 	      return {
 	        id: dataItem.dataSourceId,
 	        content: {
-	          value: dataItem.label || dataItem.dataItemId,
+	          value: getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
 	          icon: cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? /*#__PURE__*/React__default["default"].createElement("div", {
 	            className: "".concat(baseClassName$3, "--data-item-list--item-color-icon"),
 	            style: {
@@ -186118,7 +186251,7 @@
 	        }
 	      };
 	    });
-	  }, [cardConfig.type, dataSection, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+	  }, [cardConfig.type, dataSection, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
 	  return !isEmpty(validDataItems) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DataSeriesFormItemModal$1, {
 	    cardConfig: cardConfig,
 	    isSummaryDashboard: isSummaryDashboard,
@@ -186133,6 +186266,7 @@
 	    dataSection: dataSection,
 	    onChange: _onChange,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    actions: actions,
 	    options: {
 	      hasColorDropdown: type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR,
@@ -186445,6 +186579,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "getValidDataItems": {
 	      "defaultValue": {
 	        "value": "null",
@@ -192027,6 +192172,9 @@
 	    thisYearLabel: PropTypes__default["default"].string
 	  }),
 
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
 	  /** if provided, returns an array of strings which are the timeRanges to be allowed
 	   * on each card
 	   * getValidTimeRanges(card, selectedDataItems)
@@ -192067,6 +192215,7 @@
 	var defaultProps$G = {
 	  cardConfig: {},
 	  i18n: {},
+	  shouldUseTranslatedLabels: false,
 	  getValidDataItems: null,
 	  getValidTimeRanges: null,
 	  dataItems: [],
@@ -192108,6 +192257,7 @@
 	      isSummaryDashboard = _ref.isSummaryDashboard,
 	      onChange = _ref.onChange,
 	      i18n = _ref.i18n,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      dataItems = _ref.dataItems,
 	      getValidDataItems = _ref.getValidDataItems,
 	      getValidTimeRanges = _ref.getValidTimeRanges,
@@ -192145,6 +192295,7 @@
 	    ,
 	    onChange: onChange,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    getValidTimeRanges: getValidTimeRanges,
 	    currentBreakpoint: currentBreakpoint,
 	    selectedDataItems: selectedDataItems,
@@ -192191,6 +192342,7 @@
 	    getValidDataItems: getValidDataItems,
 	    availableDimensions: availableDimensions,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    dataSeriesItemLinks: dataSeriesItemLinks,
 	    translateWithId: handleTranslation,
 	    actions: actions
@@ -192432,6 +192584,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "getValidDataItems": {
 	      "defaultValue": {
 	        "value": "null",
@@ -194461,6 +194624,9 @@
 	    modalIconDescription: PropTypes__default["default"].string
 	  }),
 
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
 	  /** if provided, returns an array of strings which are the dataItems to be allowed
 	   * on each card
 	   * getValidDataItems(card, selectedTimeRange)
@@ -194526,6 +194692,7 @@
 	    modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
 	    modalIconDescription: 'Close'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  getValidDataItems: null,
 	  getValidTimeRanges: null,
 	  dataItems: [],
@@ -194555,6 +194722,7 @@
 	      availableDimensions = _ref.availableDimensions,
 	      dataSeriesItemLinks = _ref.dataSeriesItemLinks,
 	      onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      actions = _ref.actions;
 	  var mergedI18n = React$1.useMemo(function () {
 	    return _objectSpread$p(_objectSpread$p({}, defaultProps$z.i18n), i18n);
@@ -194572,6 +194740,7 @@
 	    onChange: onChange,
 	    isSummaryDashboard: isSummaryDashboard,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    dataItems: dataItems,
 	    availableDimensions: availableDimensions,
 	    getValidDataItems: getValidDataItems,
@@ -194722,6 +194891,17 @@
 	      "required": false,
 	      "description": ""
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "getValidDataItems": {
 	      "defaultValue": {
 	        "value": "null",
@@ -194983,6 +195163,9 @@
 	    searchPlaceHolderText: PropTypes__default["default"].string,
 	    editDataItems: PropTypes__default["default"].string
 	  }),
+
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
 	  currentBreakpoint: PropTypes__default["default"].string,
 	  isSummaryDashboard: PropTypes__default["default"].bool,
 
@@ -195018,6 +195201,7 @@
 	    modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
 	    modalIconDescription: 'Close'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  getValidDimensions: null,
 	  getValidDataItems: null,
 	  getValidTimeRanges: null,
@@ -195183,6 +195367,7 @@
 	      onRenderCardEditForm = _ref.onRenderCardEditForm,
 	      icons = _ref.icons,
 	      i18n = _ref.i18n,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      currentBreakpoint = _ref.currentBreakpoint,
 	      testId = _ref.testId,
 	      dataSeriesItemLinks = _ref.dataSeriesItemLinks,
@@ -195251,6 +195436,7 @@
 	    getValidTimeRanges: getValidTimeRanges,
 	    availableDimensions: availableDimensions,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    currentBreakpoint: currentBreakpoint,
 	    dataSeriesItemLinks: dataSeriesItemLinks,
 	    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -195417,6 +195603,17 @@
 	      "required": false,
 	      "description": "i18n must include the label for each `supportedCardTypes`\nex:\n[\n TIMESERIES: 'ITEM 1',\n ALERT: 'ITEM 8',\n CUSTOM: 'ITEM 10',\n COOL_NEW_CARD: 'Missing Icon',\n]"
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "getValidDimensions": {
 	      "defaultValue": {
 	        "value": "null",
@@ -196449,7 +196646,8 @@
 	      baseClassName = _ref2.baseClassName,
 	      renderCardPreview = _ref2.renderCardPreview,
 	      style = _ref2.style,
-	      cardConfig = objectWithoutProperties(_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"]);
+	      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
+	      cardConfig = objectWithoutProperties(_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"]);
 
 	  // We have to keep track of our dynamic hotspots here
 	  var _useState5 = React$1.useState([]),
@@ -196484,6 +196682,7 @@
 	      key: cardConfig.id,
 	      tooltip: cardConfig.description,
 	      i18n: i18n,
+	      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	      availableActions: availableActions,
 	      onCardAction: handleOnCardAction,
 	      renderIconByName: renderIconByName,
@@ -196496,7 +196695,7 @@
 	      onBrowseClick: cardConfig.type === CARD_TYPES.IMAGE && isNil((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.src) ? onShowImageGallery : undefined,
 	      validateUploadedImage: cardConfig.type === CARD_TYPES.IMAGE ? onValidateUploadedImage : undefined
 	    });
-	  }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, style]);
+	  }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, shouldUseTranslatedLabels, style]);
 	  React$1.useEffect(function () {
 	    var _cardProps$values, _cardProps$values$hot;
 
@@ -196855,6 +197054,9 @@
 	    editDataItems: PropTypes__default["default"].string
 	  }),
 
+	  /** whether to use translated labels in cards */
+	  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
 	  /** locale data */
 	  locale: PropTypes__default["default"].string,
 
@@ -196948,6 +197150,7 @@
 	    saveTitleButton: 'Save title',
 	    editDataItems: 'Edit data items'
 	  },
+	  shouldUseTranslatedLabels: false,
 	  locale: 'en',
 	  dataSeriesItemLinks: null,
 	  onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -197026,6 +197229,7 @@
 	      isSummaryDashboard = _ref.isSummaryDashboard,
 	      isLoading = _ref.isLoading,
 	      i18n = _ref.i18n,
+	      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
 	      locale = _ref.locale,
 	      dataSeriesItemLinks = _ref.dataSeriesItemLinks,
 	      isTitleEditable = _ref.isTitleEditable,
@@ -197292,7 +197496,7 @@
 	    className: classnames$3("".concat(baseClassName$1, "--content"), defineProperty$d({}, "".concat(baseClassName$1, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
 	    ref: scrollContainerRef
 	  }, renderHeader ? renderHeader() : /*#__PURE__*/React__default["default"].createElement(DashboardEditorHeader$1, {
-	    title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+	    title: getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
 	    breadcrumbs: headerBreadcrumbs,
 	    onImport: onImport,
 	    onExport: function onExport() {
@@ -197376,6 +197580,7 @@
 	      key: cardConfig.id,
 	      isResizable: isCardResizable,
 	      i18n: mergedI18n,
+	      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	      isSelected: isSelected,
 	      availableDimensions: availableDimensions,
 	      onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -197420,6 +197625,7 @@
 	    getValidDimensions: getValidDimensions,
 	    availableDimensions: availableDimensions,
 	    i18n: mergedI18n,
+	    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
 	    currentBreakpoint: currentBreakpoint,
 	    dataSeriesItemLinks: dataSeriesItemLinks,
 	    onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -198343,6 +198549,17 @@
 	      "required": false,
 	      "description": "internationalization strings"
 	    },
+	    "shouldUseTranslatedLabels": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "whether to use translated labels in cards"
+	    },
 	    "locale": {
 	      "defaultValue": {
 	        "value": "'en'",