carbon-addons-iot-react 4.4.0 → 4.5.1

package/lib/components/DateTimePicker/DateTimePicker.js

@@ -38,7 +38,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "style"];
+var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "timeZone", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix,
@@ -185,6 +185,8 @@ var propTypes = {
   light: PropTypes__default.default.bool,
   /** The language locale used to format the days of the week, months, and numbers. */
   locale: PropTypes__default.default.string,
+  /** IANA timezone string to interpret datetime values in (e.g., 'America/New_York') */
+  timeZone: PropTypes__default.default.string,
   /** Unique id of the component */
   id: PropTypes__default.default.string,
   style: PropTypes__default.default.objectOf(PropTypes__default.default.string)
@@ -260,6 +262,7 @@ var defaultProps = {
   },
   light: false,
   locale: 'en',
+  timeZone: undefined,
   id: undefined,
   style: {}
 };
@@ -282,10 +285,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     i18n = _ref.i18n,
     light = _ref.light,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     style = _ref.style,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
   var id = React.useRef(others.id || uuid.v4()).current;
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   dayjs.default.locale(locale);
 
   // State
@@ -412,7 +418,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = PICKER_KINDS.PRESET;
     }
     setCurrentValue(value);
-    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel);
+    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput, effectiveTimezone);
     setHumanValue(parsedValue.readableValue);
     return _objectSpread(_objectSpread({}, value), parsedValue);
   };
@@ -467,15 +473,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
         setIsCustomRange(true);
         setCustomRangeKind(PICKER_KINDS.ABSOLUTE);
         if (!absolute.hasOwnProperty('start')) {
-          absolute.start = dayjs.default("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
+          var startDateTime = "".concat(absolute.startDate, " ").concat(absolute.startTime);
+          absolute.start = dayjs.default.tz(startDateTime, dayjs.detectDateTimeFormat(startDateTime), effectiveTimezone).valueOf();
         }
         if (!absolute.hasOwnProperty('end')) {
-          absolute.end = dayjs.default("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
+          var endDateTime = "".concat(absolute.endDate, " ").concat(absolute.endTime);
+          absolute.end = dayjs.default.tz(endDateTime, dayjs.detectDateTimeFormat(endDateTime), effectiveTimezone).valueOf();
         }
-        absolute.startDate = dayjs.default(absolute.start).format('MM/DD/YYYY');
-        absolute.startTime = dayjs.default(absolute.start).format('HH:mm');
-        absolute.endDate = dayjs.default(absolute.end).format('MM/DD/YYYY');
-        absolute.endTime = dayjs.default(absolute.end).format('HH:mm');
+        absolute.startDate = dayjs.default.tz(absolute.start).format('MM/DD/YYYY');
+        absolute.startTime = dayjs.default.tz(absolute.start).format('HH:mm');
+        absolute.endDate = dayjs.default.tz(absolute.end).format('MM/DD/YYYY');
+        absolute.endTime = dayjs.default.tz(absolute.end).format('HH:mm');
         setAbsoluteValue(absolute);
       }
     } else {
@@ -564,7 +572,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     humanValue: humanValue
   });
   var disableRelativeApply = isCustomRange && customRangeKind === PICKER_KINDS.RELATIVE && (relativeLastNumberInvalid || relativeToTimeInvalid);
-  var disableAbsoluteApply = isCustomRange && customRangeKind === PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || absoluteValue.startDate === '' && absoluteValue.endDate === '' || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
+  var disableAbsoluteApply = isCustomRange && customRangeKind === PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || !absoluteValue.startDate || !absoluteValue.endDate || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
   var disableApply = disableRelativeApply || disableAbsoluteApply;
   React.useEffect(function () {
     return setInvalidState(invalid || disableApply);
@@ -1278,6 +1286,17 @@ DateTimePicker.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "description": "IANA timezone string to interpret datetime values in (e.g., 'America/New_York')",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "id": {
       "defaultValue": {
         "value": "undefined",

package/lib/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -815,7 +815,6 @@ var DateTimePicker = function DateTimePicker(_ref2) {
     return setInvalidState(invalid);
   }, [invalid]);
   var onApplyClick = function onApplyClick() {
-    var _value$absolute$start, _value$absolute$end;
     var value = renderValue();
     var returnValue = {
       timeRangeKind: value.kind,
@@ -830,8 +829,8 @@ var DateTimePicker = function DateTimePicker(_ref2) {
         returnValue.timeRangeValue = _objectSpread(_objectSpread({}, value.absolute), {}, {
           humanValue: humanValue,
           tooltipValue: tooltipValue,
-          ISOStart: (_value$absolute$start = value.absolute.start) === null || _value$absolute$start === void 0 ? void 0 : _value$absolute$start.toISOString(),
-          ISOEnd: (_value$absolute$end = value.absolute.end) === null || _value$absolute$end === void 0 ? void 0 : _value$absolute$end.toISOString()
+          ISOStart: value.absolute.start ? new Date(value.absolute.start).toISOString() : undefined,
+          ISOEnd: value.absolute.end ? new Date(value.absolute.end).toISOString() : undefined
         });
         break;
       case DateConstants.PICKER_KINDS.SINGLE:

package/lib/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js

@@ -43,7 +43,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var warning__default = /*#__PURE__*/_interopDefault(warning);
 
-var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "hasIconOnly", "menuOffset", "renderInPortal", "useAutoPositioning", "style", "buttonProps"];
+var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "onCancel", "onApply", "i18n", "light", "locale", "timeZone", "hasIconOnly", "menuOffset", "renderInPortal", "useAutoPositioning", "style", "buttonProps"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix,
@@ -153,6 +153,8 @@ var propTypes = {
   light: PropTypes__default.default.bool,
   /** The language locale used to format the days of the week, months, and numbers. */
   locale: PropTypes__default.default.string,
+  /** IANA timezone string to set as default timezone for dayjs */
+  timeZone: PropTypes__default.default.string,
   /** Unique id of the component */
   id: PropTypes__default.default.string,
   /** Optionally renders only an icon rather than displaying the current selected time */
@@ -243,6 +245,7 @@ var defaultProps = {
   },
   light: false,
   locale: 'en',
+  timeZone: undefined,
   id: undefined,
   hasIconOnly: false,
   menuOffset: undefined,
@@ -271,6 +274,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     i18n = _ref.i18n,
     light = _ref.light,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     hasIconOnly = _ref.hasIconOnly,
     menuOffset = _ref.menuOffset,
     renderInPortal = _ref.renderInPortal,
@@ -278,6 +282,9 @@ var DateTimePicker = function DateTimePicker(_ref) {
     style = _ref.style,
     buttonProps = _ref.buttonProps,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
+  dayjs.default.locale(locale);
   var id = React.useRef(others.id || uuid.v4()).current;
   React__default.default.useEffect(function () {
     {
@@ -417,7 +424,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = DateConstants.PICKER_KINDS.PRESET;
     }
     setCurrentValue(value);
-    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel);
+    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput, effectiveTimezone);
     setHumanValue(parsedValue.readableValue);
     return _objectSpread(_objectSpread({}, value), parsedValue);
   };
@@ -472,15 +479,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
         setIsCustomRange(true);
         setCustomRangeKind(DateConstants.PICKER_KINDS.ABSOLUTE);
         if (!absolute.hasOwnProperty('start')) {
-          absolute.start = dayjs.default("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
+          var startDateTime = "".concat(absolute.startDate, " ").concat(absolute.startTime);
+          absolute.start = dayjs.default.tz(startDateTime, dayjs.detectDateTimeFormat(startDateTime), effectiveTimezone).valueOf();
         }
         if (!absolute.hasOwnProperty('end')) {
-          absolute.end = dayjs.default("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
+          var endDateTime = "".concat(absolute.endDate, " ").concat(absolute.endTime);
+          absolute.end = dayjs.default.tz(endDateTime, dayjs.detectDateTimeFormat(endDateTime), effectiveTimezone).valueOf();
         }
-        absolute.startDate = dayjs.default(absolute.start).format('MM/DD/YYYY');
-        absolute.startTime = dayjs.default(absolute.start).format('HH:mm');
-        absolute.endDate = dayjs.default(absolute.end).format('MM/DD/YYYY');
-        absolute.endTime = dayjs.default(absolute.end).format('HH:mm');
+        absolute.startDate = dayjs.default.tz(absolute.start).format('MM/DD/YYYY');
+        absolute.startTime = dayjs.default.tz(absolute.start).format('HH:mm');
+        absolute.endDate = dayjs.default.tz(absolute.end).format('MM/DD/YYYY');
+        absolute.endTime = dayjs.default.tz(absolute.end).format('HH:mm');
         setAbsoluteValue(absolute);
       }
     } else {
@@ -527,7 +536,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     humanValue: humanValue
   });
   var disableRelativeApply = isCustomRange && customRangeKind === DateConstants.PICKER_KINDS.RELATIVE && (relativeLastNumberInvalid || relativeToTimeInvalid);
-  var disableAbsoluteApply = isCustomRange && customRangeKind === DateConstants.PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || absoluteValue.startDate === '' && absoluteValue.endDate === '' || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
+  var disableAbsoluteApply = isCustomRange && customRangeKind === DateConstants.PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid || !absoluteValue.startDate || !absoluteValue.endDate || (hasTimeInput ? !absoluteValue.startTime || !absoluteValue.endTime : false));
   var disableApply = disableRelativeApply || disableAbsoluteApply;
   React.useEffect(function () {
     return setInvalidState(invalid || disableApply);
@@ -1221,6 +1230,17 @@ DateTimePicker.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "description": "IANA timezone string to set as default timezone for dayjs",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "id": {
       "defaultValue": {
         "value": "undefined",

package/lib/components/DateTimePicker/dateTimePickerUtils.js

@@ -89,7 +89,7 @@ var format12hourTo24hour = function format12hourTo24hour(time12hour) {
  * @param {Object} value - the absolute time selection
  * @returns {Object} a human readable value and a furtherly augmented value object
  */
-var parseValue = function parseValue(timeRange, dateTimeMask, toLabel, hasTimeInput) {
+var parseValue = function parseValue(timeRange, dateTimeMask, toLabel, hasTimeInput, timeZone) {
   var _timeRange$kind, _timeRange$relative, _timeRange$absolute, _timeRange$single, _timeRange$preset;
   var readableValue = '';
   if (!timeRange) {
@@ -109,9 +109,9 @@ var parseValue = function parseValue(timeRange, dateTimeMask, toLabel, hasTimeIn
   switch (kind) {
     case DateConstants.PICKER_KINDS.RELATIVE:
       {
-        var endDate = dayjs.default();
+        var endDate = dayjs.default.tz();
         if (value.relativeToWhen !== '') {
-          endDate = value.relativeToWhen === DateConstants.RELATIVE_VALUES.YESTERDAY ? dayjs.default().add(-1, DateConstants.INTERVAL_VALUES.DAYS) : dayjs.default();
+          endDate = value.relativeToWhen === DateConstants.RELATIVE_VALUES.YESTERDAY ? dayjs.default.tz().subtract(1, DateConstants.INTERVAL_VALUES.DAYS) : dayjs.default.tz();
           // wait to parse it until fully typed
           if (value.relativeToTime.length === 5) {
             endDate = endDate.hour(Number(value.relativeToTime.split(':')[0]));
@@ -123,37 +123,42 @@ var parseValue = function parseValue(timeRange, dateTimeMask, toLabel, hasTimeIn
           }
           returnValue.relative.start = new Date(startDate.valueOf());
           returnValue.relative.end = new Date(endDate.valueOf());
-          readableValue = "".concat(dayjs.default(startDate).format(dateTimeMask), " ").concat(toLabel, " ").concat(dayjs.default(endDate).format(dateTimeMask));
+          readableValue = "".concat(startDate.format(dateTimeMask), " ").concat(toLabel, " ").concat(endDate.format(dateTimeMask));
         }
         break;
       }
     case DateConstants.PICKER_KINDS.ABSOLUTE:
       {
-        var _value$start, _value$end;
-        var _startDate = dayjs.default((_value$start = value.start) !== null && _value$start !== void 0 ? _value$start : value.startDate);
-        if (value.startTime) {
-          var formatedStartTime = is24hours(dateTimeMask) ? value.startTime : format12hourTo24hour(value.startTime);
-          _startDate = _startDate.hours(formatedStartTime.split(':')[0]);
-          _startDate = _startDate.minutes(formatedStartTime.split(':')[1]);
-        }
-        if (!returnValue.absolute) {
-          returnValue.absolute = {};
-        }
-        returnValue.absolute.start = new Date(_startDate.valueOf());
-        var startTimeValue = value.startTime ? "".concat(dayjs.default(_startDate).format(dateTimeMask)) : "".concat(dayjs.default(_startDate).format(dateTimeMask)).split(' ')[0];
-        if ((_value$end = value.end) !== null && _value$end !== void 0 ? _value$end : value.endDate) {
-          var _value$end2;
-          var _endDate = dayjs.default((_value$end2 = value.end) !== null && _value$end2 !== void 0 ? _value$end2 : value.endDate);
-          if (value.endTime) {
-            var formatedEndTime = is24hours(dateTimeMask) ? value.endTime : format12hourTo24hour(value.endTime);
-            _endDate = _endDate.hours(formatedEndTime.split(':')[0]);
-            _endDate = _endDate.minutes(formatedEndTime.split(':')[1]);
+        var _value$start;
+        if ((_value$start = value.start) !== null && _value$start !== void 0 ? _value$start : value.startDate) {
+          var _value$end;
+          var _startDate = value.start instanceof Date ? dayjs.default(value.start).tz(timeZone, true) // Date from picker - preserve local time
+          : value.start ? dayjs.default.tz(value.start) // Timestamp - convert from UTC
+          : dayjs.default.tz(value.startDate, 'MM/DD/YYYY', timeZone); // String - parse with format
+
+          if (value.startTime && value.startTime.includes(':')) {
+            var formatedStartTime = is24hours(dateTimeMask) ? value.startTime : format12hourTo24hour(value.startTime);
+            _startDate = _startDate.hours(formatedStartTime.split(':')[0]);
+            _startDate = _startDate.minutes(formatedStartTime.split(':')[1]);
+          }
+          if (!returnValue.absolute) {
+            returnValue.absolute = {};
+          }
+          returnValue.absolute.start = _startDate.valueOf();
+          var startTimeValue = value.startTime ? "".concat(_startDate.format(dateTimeMask)) : "".concat(_startDate.format(dateTimeMask)).split(' ')[0];
+          if ((_value$end = value.end) !== null && _value$end !== void 0 ? _value$end : value.endDate) {
+            var _endDate = value.end instanceof Date ? dayjs.default(value.end).tz(timeZone, true) : value.end ? dayjs.default(value.end).tz(timeZone) : dayjs.default.tz(value.endDate, 'MM/DD/YYYY', timeZone);
+            if (value.endTime && value.endTime.includes(':')) {
+              var formatedEndTime = is24hours(dateTimeMask) ? value.endTime : format12hourTo24hour(value.endTime);
+              _endDate = _endDate.hours(formatedEndTime.split(':')[0]);
+              _endDate = _endDate.minutes(formatedEndTime.split(':')[1]);
+            }
+            var endTimeValue = value.endTime ? "".concat(_endDate.format(dateTimeMask)) : "".concat(_endDate.format(dateTimeMask)).split(' ')[0];
+            returnValue.absolute.end = _endDate.valueOf();
+            readableValue = "".concat(startTimeValue, " ").concat(toLabel, " ").concat(endTimeValue);
+          } else {
+            readableValue = "".concat(startTimeValue, " ").concat(toLabel, " ").concat(startTimeValue);
           }
-          var endTimeValue = value.endTime ? "".concat(dayjs.default(_endDate).format(dateTimeMask)) : "".concat(dayjs.default(_endDate).format(dateTimeMask)).split(' ')[0];
-          returnValue.absolute.end = new Date(_endDate.valueOf());
-          readableValue = "".concat(startTimeValue, " ").concat(toLabel, " ").concat(endTimeValue);
-        } else {
-          readableValue = "".concat(startTimeValue, " ").concat(toLabel, " ").concat(startTimeValue);
         }
         break;
       }
@@ -584,7 +589,7 @@ var getIntervalValue = function getIntervalValue(_ref7) {
     humanValue = _ref7.humanValue;
   if (currentValue) {
     if (currentValue.kind === DateConstants.PICKER_KINDS.PRESET) {
-      return "".concat(dayjs.default().subtract(currentValue.preset.offset, 'minutes').format(dateTimeMask), " ").concat(mergedI18n.toNowLabel);
+      return "".concat(dayjs.default.tz().subtract(currentValue.preset.offset, 'minutes').format(dateTimeMask), " ").concat(mergedI18n.toNowLabel);
     }
     return humanValue;
   }

package/lib/components/ImageCard/ImageCard.js

@@ -28,6 +28,7 @@ var Card = require('../Card/Card.js');
 var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var editorUtils = require('../DashboardEditor/editorUtils.js');
 var Settings = require('../../constants/Settings.js');
+var dayjs = require('../../utils/dayjs.js');
 var ImageHotspots = require('./ImageHotspots.js');
 var ImageUploader = require('./ImageUploader.js');
 var iconsReact = require('@carbon/icons-react');
@@ -40,7 +41,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["title", "content", "children", "values", "size", "onCardAction", "availableActions", "isEditable", "isExpanded", "isResizable", "error", "isLoading", "maxFileSizeInBytes", "i18n", "i18n", "renderIconByName", "locale", "onUpload", "validateUploadedImage", "onBrowseClick", "testID", "testId"];
+var _excluded = ["title", "content", "children", "values", "size", "onCardAction", "availableActions", "isEditable", "isExpanded", "isResizable", "error", "isLoading", "maxFileSizeInBytes", "i18n", "i18n", "renderIconByName", "locale", "onUpload", "validateUploadedImage", "onBrowseClick", "testID", "testId", "timeZone"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix;
@@ -62,6 +63,7 @@ var defaultProps = {
     }
   },
   locale: 'en',
+  timeZone: undefined,
   content: {},
   maxFileSizeInBytes: 1048576,
   accept: null,
@@ -121,7 +123,10 @@ var ImageCard = function ImageCard(_ref) {
     onBrowseClick = _ref.onBrowseClick,
     testID = _ref.testID,
     testId = _ref.testId,
+    timeZone = _ref.timeZone,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   var _useState = React.useState(content),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     imgContent = _useState2[0],
@@ -180,7 +185,8 @@ var ImageCard = function ImageCard(_ref) {
     // TODO: remove deprecated testID prop in v3.
     ,
     testId: testID || testId,
-    locale: locale
+    locale: locale,
+    timeZone: effectiveTimezone
   }, others, {
     error: error,
     i18n: mergedI18n
@@ -256,6 +262,13 @@ ImageCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "content": {
       "defaultValue": {
         "value": "{}",

package/lib/components/ListCard/ListCard.js

@@ -26,6 +26,7 @@ var CardPropTypes = require('../../constants/CardPropTypes.js');
 var Card = require('../Card/Card.js');
 var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var deprecate = require('../../internal/deprecate.js');
+var dayjs = require('../../utils/dayjs.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -36,7 +37,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["id", "title", "size", "data", "isLoading", "isResizable", "loadData", "hasMoreData", "layout", "className", "children", "testID", "testId"];
+var _excluded = ["id", "title", "size", "data", "isLoading", "isResizable", "loadData", "hasMoreData", "layout", "className", "children", "testID", "testId", "timeZone"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ListCard = function ListCard(_ref) {
@@ -53,7 +54,10 @@ var ListCard = function ListCard(_ref) {
     children = _ref.children,
     testID = _ref.testID,
     testId = _ref.testId,
+    timeZone = _ref.timeZone,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   var handleScroll = function handleScroll(e) {
     var element = e.target;
     //  height of the elements content - height element’s content is scrolled vertically === height of the scrollable part of the element
@@ -71,7 +75,8 @@ var ListCard = function ListCard(_ref) {
     resizeHandles: resizeHandles
     // TODO: remove deprecated 'testID' in v3.
     ,
-    testId: testID || testId
+    testId: testID || testId,
+    timeZone: effectiveTimezone
   }, others), /*#__PURE__*/React__default.default.createElement("div", {
     className: classnames__default.default('list-card', className),
     style: {

package/lib/components/TableCard/TableCard.js

@@ -55,13 +55,14 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-var _excluded = ["id", "title", "isExpanded", "content", "children", "size", "onCardAction", "values", "filters", "isEditable", "isResizable", "i18n", "tooltip", "locale", "timeRange", "timeRangeOptions", "availableActions", "isLoading", "testID", "testId", "className", "renderDateDropdownInPortal", "withToolbarTooltips", "defaultDateFormatPattern", "extraActions"];
+var _excluded = ["id", "title", "isExpanded", "content", "children", "size", "onCardAction", "values", "filters", "isEditable", "isResizable", "i18n", "tooltip", "locale", "timeZone", "timeRange", "timeRangeOptions", "availableActions", "isLoading", "testID", "testId", "className", "renderDateDropdownInPortal", "withToolbarTooltips", "defaultDateFormatPattern", "extraActions"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix;
 var defaultProps = {
   size: LayoutConstants.CARD_SIZES.LARGE,
   locale: 'en',
+  timeZone: undefined,
   values: [],
   filters: [],
   i18n: {
@@ -115,6 +116,7 @@ var TableCard = function TableCard(_ref) {
     i18n = _ref.i18n,
     tooltip = _ref.tooltip,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     timeRange = _ref.timeRange,
     timeRangeOptions = _ref.timeRangeOptions,
     availableActions = _ref.availableActions,
@@ -128,8 +130,8 @@ var TableCard = function TableCard(_ref) {
     extraActions = _ref.extraActions,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
-
-  // Set the locale
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
   dayjs.default.locale(locale);
   /** Searches for variables and updates the card if it is passed the cardVariables prop */
   // Need to skip the linkTemplate variable for now because we will handle it at render time per row
@@ -312,7 +314,7 @@ var TableCard = function TableCard(_ref) {
       var values = _objectSpread({}, row.values);
       Object.keys(values).forEach(function (column) {
         if (!isEditable && filteredTimestampColumns.includes(column)) {
-          values[column] = values[column] ? dayjs.default(values[column]).format(defaultDateFormatPattern) : '';
+          values[column] = values[column] ? dayjs.default.tz(values[column]).format(defaultDateFormatPattern) : '';
         }
       });
       return _objectSpread(_objectSpread({}, row), {}, {
@@ -490,6 +492,7 @@ var TableCard = function TableCard(_ref) {
     timeRangeOptions: timeRangeOptions,
     renderDateDropdownInPortal: renderDateDropdownInPortal,
     locale: locale,
+    timeZone: effectiveTimezone,
     id: id,
     extraActions: extraActions
   });
@@ -507,6 +510,7 @@ var TableCard = function TableCard(_ref) {
     isExpanded: isExpanded,
     i18n: mergedI18n,
     locale: locale,
+    timeZone: effectiveTimezone,
     resizeHandles: resizeHandles,
     hideHeader: true,
     className: classnames__default.default("".concat(iotPrefix, "--table-card"), className, _defineProperty__default.default({}, "".concat(iotPrefix, "--table-card--with-tooltips"), withToolbarTooltips))
@@ -614,6 +618,13 @@ TableCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "values": {
       "defaultValue": {
         "value": "[]",

package/lib/components/TableCard/tableCardUtils.js

@@ -70,7 +70,7 @@ var createColumnsWithFormattedLinks = function createColumnsWithFormattedLinks(c
               });
               var variableValue =
               // format the TIMESTAMP type columns
-              (matchingColumn === null || matchingColumn === void 0 ? void 0 : matchingColumn.type) === 'TIMESTAMP' ? dayjs.default(row[variable]).format(defaultDateFormatPattern) : row[variable];
+              (matchingColumn === null || matchingColumn === void 0 ? void 0 : matchingColumn.type) === 'TIMESTAMP' ? dayjs.default.tz(row[variable]).format(defaultDateFormatPattern) : row[variable];
               // encode value so the URL can be valid
               var encodedValue = typeof variableValue === 'string' && variableValue !== null && variableValue !== void 0 && variableValue.includes('https') ? variableValue : encodeURIComponent(variableValue);
               variableLink = variableLink.replace("{".concat(variable, "}"), encodedValue);
@@ -138,7 +138,7 @@ var determineFilterFunction = function determineFilterFunction(column, defaultFi
   var defaultDateFormatPattern = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : dayjs.DAYJS_INPUT_FORMATS.SECONDS;
   return _objectSpread(_objectSpread({}, column.type === 'TIMESTAMP' ? {
     filterFunction: function filterFunction(cellValue, filterValue) {
-      var dateString = dayjs.default(cellValue).format(defaultDateFormatPattern);
+      var dateString = dayjs.default.tz(cellValue).format(defaultDateFormatPattern);
       return dateString.includes(filterValue);
     }
   } : {}), {}, {

package/lib/components/TimeSeriesCard/TimeSeriesCard.js

@@ -54,7 +54,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["title", "content", "children", "size", "interval", "isEditable", "isResizable", "values", "locale", "i18n", "isExpanded", "timeRange", "isLazyLoading", "isLoading", "domainRange", "tooltipDateFormatPattern", "tooltipShowTotals", "showTimeInGMT", "testID", "testId", "defaultDateFormatPattern"];
+var _excluded = ["title", "content", "children", "size", "interval", "isEditable", "isResizable", "values", "locale", "timeZone", "i18n", "isExpanded", "timeRange", "isLazyLoading", "isLoading", "domainRange", "tooltipDateFormatPattern", "tooltipShowTotals", "showTimeInGMT", "testID", "testId", "defaultDateFormatPattern"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iotPrefix = Settings.settings.iotPrefix;
@@ -171,6 +171,7 @@ var defaultProps = {
   },
   chartType: LayoutConstants.TIME_SERIES_TYPES.LINE,
   locale: 'en',
+  timeZone: undefined,
   content: {
     series: [],
     timeDataSourceId: 'timestamp',
@@ -201,6 +202,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     isResizable = _ref.isResizable,
     initialValues = _ref.values,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     i18n = _ref.i18n,
     isExpanded = _ref.isExpanded,
     timeRange = _ref.timeRange,
@@ -214,6 +216,9 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     testId = _ref.testId,
     defaultDateFormatPattern = _ref.defaultDateFormatPattern,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.default.tz.guess();
+  dayjs.default.tz.setDefault(effectiveTimezone);
+  dayjs.default.locale(locale);
   // need to deep merge the nested content default props as default props only uses a shallow merge natively
   var contentWithDefaults = React.useMemo(function () {
     return defaultsDeep({}, content, defaultProps.content);
@@ -243,8 +248,6 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     valuesProp = _handleCardVariables.values;
   var chartRef = React.useRef(null);
   var previousTick = React.useRef();
-  dayjs.default.locale(locale);
-
   // Workaround since downstream consumers might keep regenerating the series object and useMemo does a direct in-memory comparison for the object
   var objectAgnosticSeries = JSON.stringify(series);
   var objectAgnosticThresholds = JSON.stringify(thresholds);
@@ -324,7 +327,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
         });
         return {
           id: "dataindex-".concat(index),
-          values: _objectSpread(_objectSpread({}, omit(value, timeDataSourceId)), {}, _defineProperty__default.default({}, timeDataSourceId, dayjs.default(value[timeDataSourceId]).format(defaultDateFormatPattern))),
+          values: _objectSpread(_objectSpread({}, omit(value, timeDataSourceId)), {}, _defineProperty__default.default({}, timeDataSourceId, dayjs.default.tz(value[timeDataSourceId]).format(defaultDateFormatPattern))),
           isSelectable: false
         };
       });
@@ -478,6 +481,7 @@ var TimeSeriesCard = function TimeSeriesCard(_ref) {
     timeRange: timeRange
   }, others, {
     locale: locale,
+    timeZone: effectiveTimezone,
     isExpanded: isExpanded,
     isEditable: isEditable,
     isEmpty: isChartDataEmpty,
@@ -628,6 +632,13 @@ TimeSeriesCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "content": {
       "defaultValue": {
         "value": "{\n  series: [],\n  timeDataSourceId: 'timestamp',\n  includeZeroOnXaxis: false,\n  includeZeroOnYaxis: false,\n  showLegend: true,\n  legendPosition: 'bottom',\n  truncation: {\n    type: 'end_line',\n    threshold: 20,\n    numCharacter: 20,\n  },\n}",

package/lib/components/TimeSeriesCard/timeSeriesUtils.js

@@ -146,7 +146,7 @@ var formatGraphTick = function formatGraphTick(timestamp, index, ticks, interval
   var previousTickTimestamp = arguments.length > 5 ? arguments[5] : undefined;
   var shouldDisplayGMT = arguments.length > 6 ? arguments[6] : undefined;
   dayjs.default.locale(locale);
-  var currentTimestamp = shouldDisplayGMT ? dayjs.default.utc(timestamp) : dayjs.default(timestamp);
+  var currentTimestamp = shouldDisplayGMT ? dayjs.default.utc(timestamp) : dayjs.default.tz(timestamp);
   var sameDay = dayjs.default(previousTickTimestamp).isSame(currentTimestamp, 'day');
   var sameMonth = dayjs.default(previousTickTimestamp).isSame(currentTimestamp, 'month');
   var sameYear = dayjs.default(previousTickTimestamp).isSame(currentTimestamp, 'year');
@@ -240,7 +240,7 @@ var formatChartData = function formatChartData() {
           // Check to see if the data Item actually exists in this timestamp before adding to data (to support sparse data in the values)
           if (!isNil(dataItem[dataSourceId])) {
             data.push({
-              date: dataItem[timeDataSourceId] instanceof Date ? dataItem[timeDataSourceId] : new Date(dataItem[timeDataSourceId]),
+              date: dayjs.default.tz(dataItem[timeDataSourceId]).toDate(),
               value: dataItem[dataSourceId],
               group: label,
               dataSourceId: dataSourceId

package/lib/components/ValueCard/Attribute.js

@@ -124,6 +124,7 @@ var Attribute = function Attribute(_ref) {
 
   // Get translated label if shouldUseTranslatedLabels is true
   var displayLabel = cardUtilityFunctions.getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+  var displayUnitLabel = cardUtilityFunctions.getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: classnames__default.default("".concat(BEM_BASE, "-wrapper"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(BEM_BASE, "-wrapper--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL), "".concat(BEM_BASE, "-wrapper--horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL)),
     style: {
@@ -162,7 +163,7 @@ var Attribute = function Attribute(_ref) {
     measurementUnitLabel: measurementUnitLabel,
     onClick: onValueClick
   }), /*#__PURE__*/React__default.default.createElement(UnitRenderer, {
-    unit: unit,
+    unit: displayUnitLabel,
     testId: "".concat(testId, "-unit")
   })), !isNil(secondaryValue) ? /*#__PURE__*/React__default.default.createElement("div", {
     "data-testid": "".concat(testId, "-secondary-value"),