carbon-addons-iot-react 5.10.4 → 5.10.5

package/es/components/BarChartCard/BarChartCard.js

@@ -34,7 +34,7 @@ import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { formatGraphTick } from '../TimeSeriesCard/timeSeriesUtils.js';
 import { generateSampleValues, generateSampleValuesForEditor, formatChartData, mapValuesToAxes, formatColors, generateTableColumns, formatTableData, getMaxTicksPerSize, handleTooltip } from './barChartUtils.js';
 
-var _excluded = ["title", "content", "children", "size", "values", "availableDimensions", "locale", "i18n", "isExpanded", "isLazyLoading", "isEditable", "isDashboardPreview", "isLoading", "isResizable", "interval", "className", "domainRange", "timeRange", "showTimeInGMT", "tooltipDateFormatPattern", "testID", "testId", "defaultDateFormatPattern"];
+var _excluded = ["title", "content", "children", "size", "values", "availableDimensions", "locale", "timeZone", "i18n", "isExpanded", "isLazyLoading", "isEditable", "isDashboardPreview", "isLoading", "isResizable", "interval", "className", "domainRange", "timeRange", "showTimeInGMT", "tooltipDateFormatPattern", "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(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.iotPrefix;
@@ -59,6 +59,7 @@ var defaultProps = {
     series: []
   },
   locale: 'en',
+  timeZone: undefined,
   showTimeInGMT: false,
   tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
   values: null,
@@ -72,6 +73,7 @@ var BarChartCard = function BarChartCard(_ref) {
     initialValues = _ref.values,
     availableDimensions = _ref.availableDimensions,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     i18n = _ref.i18n,
     isExpanded = _ref.isExpanded,
     isLazyLoading = _ref.isLazyLoading,
@@ -89,6 +91,8 @@ var BarChartCard = function BarChartCard(_ref) {
     testId = _ref.testId,
     defaultDateFormatPattern = _ref.defaultDateFormatPattern,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   // need to deep merge the nested content default props as default props only uses a shallow merge natively
   var contentWithDefaults = useMemo(function () {
     return _defaultsDeep({}, content, defaultProps.content);
@@ -249,7 +253,7 @@ var BarChartCard = function BarChartCard(_ref) {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-          return handleTooltip.apply(void 0, args.concat([timeDataSourceId, showTimeInGMT, tooltipDateFormatPattern, locale]));
+          return handleTooltip.apply(void 0, args.concat([timeDataSourceId, showTimeInGMT, tooltipDateFormatPattern, locale, effectiveTimezone]));
         },
         groupLabel: mergedI18n.tooltipGroupLabel,
         totalLabel: mergedI18n.tooltipTotalLabel
@@ -268,7 +272,7 @@ var BarChartCard = function BarChartCard(_ref) {
         enabled: false
       }
     });
-  }, [xLabel, layout, unit, scaleType, type, timeDataSourceId, axes.bottomAxesMapsTo, axes.leftAxesMapsTo, domainRange, decimalPrecision, maxTicksPerSize, formatTick, yLabel, legendPosition, chartData.length, isEditable, truncation, colors, mergedI18n.tooltipGroupLabel, mergedI18n.tooltipTotalLabel, zoomBar, size, isExpanded, locale, showTimeInGMT, tooltipDateFormatPattern]);
+  }, [xLabel, layout, unit, scaleType, type, timeDataSourceId, axes.bottomAxesMapsTo, axes.leftAxesMapsTo, domainRange, decimalPrecision, maxTicksPerSize, formatTick, yLabel, legendPosition, chartData.length, isEditable, truncation, colors, mergedI18n.tooltipGroupLabel, mergedI18n.tooltipTotalLabel, zoomBar.enabled, zoomBar.initialZoomDomain, zoomBar.view, size, isExpanded, locale, showTimeInGMT, tooltipDateFormatPattern, effectiveTimezone]);
   return /*#__PURE__*/React__default.createElement(Card, _extends({
     title: title,
     className: classnames(className, "".concat(iotPrefix, "--bar-chart-card")),
@@ -282,7 +286,8 @@ var BarChartCard = function BarChartCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     timeRange: timeRange,
-    locale: locale
+    locale: locale,
+    timeZone: effectiveTimezone
     // TODO: remove deprecated testID in v3.
     ,
     testId: testID || testId
@@ -378,6 +383,13 @@ BarChartCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "showTimeInGMT": {
       "defaultValue": {
         "value": "false",

package/es/components/BarChartCard/barChartUtils.js

@@ -258,8 +258,7 @@ var formatChartData = function formatChartData(seriesArg, values, categoryDataSo
                 // bar this data belongs to
                 value: value[dataset.dataSourceId]
               }, timeDataSourceId && type !== BAR_CHART_TYPES.GROUPED ? {
-                date: new Date(value[timeDataSourceId]),
-                // timestamp
+                date: dayjs.tz(value[timeDataSourceId]).toDate(),
                 key: value[timeDataSourceId]
               } : {
                 key: value[categoryDataSourceId]
@@ -304,14 +303,13 @@ var formatChartData = function formatChartData(seriesArg, values, categoryDataSo
         dataset.forEach(function (value) {
           // if value is null, don't add it to the formatted chartData
           if (!isNil(value[series[0].dataSourceId])) {
-            var dataDate = new Date(value[timeDataSourceId]);
             data.push({
               // Use the label if one exists
               group: series[0].label ? series[0].label : series[0].dataSourceId,
               // bar this data belongs to
               value: value[series[0].dataSourceId],
               // there should only be one series here because its a simple bar
-              date: dataDate // timestamp
+              date: dayjs.tz(value[timeDataSourceId]).toDate()
             });
           }
         });
@@ -432,10 +430,12 @@ var formatColors = function formatColors(series, datasetNames, isDashboardPrevie
  * @param {string} timeDatasourceId time-based attribute
  * @param {bool} showTimeInGMT
  * @param {string} tooltipDataFormatPattern
+ * @param {string} timezone
  */
 var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip, _datum, timeDataSourceId, showTimeInGMT) {
   var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : DAYJS_INPUT_FORMATS.SECONDS;
   var locale = arguments.length > 6 ? arguments[6] : undefined;
+  var timezone = arguments.length > 7 ? arguments[7] : undefined;
   dayjs.locale(locale);
   var data = dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
   ? dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
@@ -449,8 +449,7 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
   if (timeDataSourceId) {
     // generate the formatted label
     var timestamp = typedData === null || typedData === void 0 ? void 0 : typedData.date;
-    var dateLabel = timestamp ? "<li class='datapoint-tooltip'>\n            <p class='label'>\n              ".concat((showTimeInGMT // show timestamp in gmt or local time
-    ? dayjs.utc(timestamp) : dayjs(timestamp)).format(tooltipDateFormatPattern), "</p>\n          </li>") : '';
+    var dateLabel = timestamp ? "<li class='datapoint-tooltip'>\n            <p class='label'>\n              ".concat((showTimeInGMT ? dayjs.utc(timestamp) : dayjs(timestamp).tz(timezone)).format(tooltipDateFormatPattern), "</p>\n          </li>") : '';
     var _convertStringsToDOME3 = convertStringsToDOMElement([dateLabel]),
       _convertStringsToDOME4 = _slicedToArray(_convertStringsToDOME3, 1),
       parsedDateLabel = _convertStringsToDOME4[0];
@@ -516,6 +515,8 @@ var generateTableColumns = function generateTableColumns(timeDataSourceId, categ
  * @param {string} type of chart i.e. simple, grouped, stacked
  * @param {Array<Object>} values values before they are formatted for charting
  * @param {Array<Object>} chartData values after they are formatted for charting
+ * @param {string} defaultDateFormatPattern date format pattern
+ * @param {string} timezone timezone to use for formatting dates
  */
 var formatTableData = function formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData) {
   var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : DAYJS_INPUT_FORMATS.SECONDS;
@@ -540,7 +541,7 @@ var formatTableData = function formatTableData(timeDataSourceId, categoryDataSou
         });
         tableData.push({
           id: "dataindex-".concat(index),
-          values: _objectSpread(_objectSpread({}, barTimeValue), {}, _defineProperty({}, timeDataSourceId, dayjs(timestamp).format(defaultDateFormatPattern))),
+          values: _objectSpread(_objectSpread({}, barTimeValue), {}, _defineProperty({}, timeDataSourceId, dayjs.tz(timestamp).format(defaultDateFormatPattern))),
           isSelectable: false
         });
       });

package/es/components/Card/Card.js

@@ -30,13 +30,13 @@ import { getTranslatedLabel, getUpdatedCardSize, useCardResizing } from '../../u
 import { parseValue } from '../DateTimePicker/dateTimePickerUtils.js';
 import useSizeObserver from '../../hooks/useSizeObserver.js';
 import EmptyState from '../EmptyState/EmptyState.js';
-import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import CardTypeContent from './CardTypeContent.js';
 import CardToolbar from './CardToolbar.js';
 import { CardTitle } from './CardTitle.js';
 
 var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-  _excluded2 = ["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", "extraHeaderContent", "shouldUseTranslatedLabels"];
+  _excluded2 = ["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", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels"];
 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(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 prefix = settings.prefix,
@@ -300,9 +300,11 @@ var Card = function Card(props) {
     data = props.data,
     content = props.content,
     extraHeaderContent = props.extraHeaderContent,
+    timeZone = props.timeZone,
     shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
     others = _objectWithoutProperties(props, _excluded2);
-
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   // Get translated title if shouldUseTranslatedLabels is true
   var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
   var tooltip = getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);
@@ -340,12 +342,12 @@ var Card = function Card(props) {
       return subtitleProp;
     }
     if (mergedAvailableActions.range === 'full' || mergedAvailableActions.range === 'iconOnly') {
-      var _parseValue = parseValue(timeRange, dateTimeMask, strings.toLabel),
+      var _parseValue = parseValue(timeRange, dateTimeMask, strings.toLabel, true, effectiveTimezone),
         readableValue = _parseValue.readableValue;
       return readableValue;
     }
     return undefined;
-  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange]);
+  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange, effectiveTimezone]);
   var _useState = useState(getTheSubtitle),
     _useState2 = _slicedToArray(_useState, 2),
     subtitle = _useState2[0],
@@ -403,6 +405,7 @@ var Card = function Card(props) {
     isExpanded: isExpanded,
     timeRange: timeRange,
     locale: others.locale,
+    timeZone: effectiveTimezone,
     timeRangeOptions: timeRangeOptions,
     onCardAction: cachedOnCardAction
     // TODO: remove deprecated testID prop in v3

package/es/components/Card/CardToolbar.js

@@ -133,7 +133,8 @@ var CardToolbar = function CardToolbar(_ref) {
     dateTimeMask = _ref.dateTimeMask,
     extraActions = _ref.extraActions,
     renderDateDropdownInPortal = _ref.renderDateDropdownInPortal,
-    id = _ref.id;
+    id = _ref.id,
+    timeZone = _ref.timeZone;
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
   var langDir = useLangDirection();
   var overflowMenuPosition = React__default.useMemo(function () {
@@ -237,6 +238,7 @@ var CardToolbar = function CardToolbar(_ref) {
     i18n: mergedI18n,
     dateTimeMask: dateTimeMask,
     locale: locale,
+    timeZone: timeZone,
     hasIconOnly: true,
     presets: Object.entries(timeRangeOptions).reduce(function (acc, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),

package/es/components/DateTimePicker/DateTimePicker.js

@@ -18,13 +18,13 @@ import classnames from 'classnames';
 import { v4 } from 'uuid';
 import TimePickerSpinner from '../TimePickerSpinner/TimePickerSpinner.js';
 import { settings } from '../../constants/Settings.js';
-import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS, detectDateTimeFormat } from '../../utils/dayjs.js';
 import { useOnClickOutside, handleSpecificKeyDown } from '../../utils/componentUtilityFunctions.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { useDateTimePickerRangeKind, useDateTimePickerKeyboardInteraction, useAbsoluteDateTimeValue, useRelativeDateTimeValue, useCloseDropdown, getIntervalValue, parseValue, invalidEndDate, invalidStartDate, useDateTimePickerClickOutside } from './dateTimePickerUtils.js';
 import { WarningFilled, Calendar } from '@carbon/icons-react';
 
-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(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.iotPrefix,
@@ -171,6 +171,8 @@ var propTypes = {
   light: PropTypes.bool,
   /** The language locale used to format the days of the week, months, and numbers. */
   locale: PropTypes.string,
+  /** IANA timezone string to interpret datetime values in (e.g., 'America/New_York') */
+  timeZone: PropTypes.string,
   /** Unique id of the component */
   id: PropTypes.string,
   style: PropTypes.objectOf(PropTypes.string)
@@ -246,6 +248,7 @@ var defaultProps = {
   },
   light: false,
   locale: 'en',
+  timeZone: undefined,
   id: undefined,
   style: {}
 };
@@ -268,10 +271,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     i18n = _ref.i18n,
     light = _ref.light,
     locale = _ref.locale,
+    timeZone = _ref.timeZone,
     style = _ref.style,
     others = _objectWithoutProperties(_ref, _excluded);
   var id = useRef(others.id || v4()).current;
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   dayjs.locale(locale);
 
   // State
@@ -398,7 +404,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = PICKER_KINDS.PRESET;
     }
     setCurrentValue(value);
-    var parsedValue = parseValue(value, dateTimeMask, mergedI18n.toLabel);
+    var parsedValue = parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput, effectiveTimezone);
     setHumanValue(parsedValue.readableValue);
     return _objectSpread(_objectSpread({}, value), parsedValue);
   };
@@ -453,15 +459,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
         setIsCustomRange(true);
         setCustomRangeKind(PICKER_KINDS.ABSOLUTE);
         if (!absolute.hasOwnProperty('start')) {
-          absolute.start = dayjs("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
+          var startDateTime = "".concat(absolute.startDate, " ").concat(absolute.startTime);
+          absolute.start = dayjs.tz(startDateTime, detectDateTimeFormat(startDateTime), effectiveTimezone).valueOf();
         }
         if (!absolute.hasOwnProperty('end')) {
-          absolute.end = dayjs("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
+          var endDateTime = "".concat(absolute.endDate, " ").concat(absolute.endTime);
+          absolute.end = dayjs.tz(endDateTime, detectDateTimeFormat(endDateTime), effectiveTimezone).valueOf();
         }
-        absolute.startDate = dayjs(absolute.start).format('MM/DD/YYYY');
-        absolute.startTime = dayjs(absolute.start).format('HH:mm');
-        absolute.endDate = dayjs(absolute.end).format('MM/DD/YYYY');
-        absolute.endTime = dayjs(absolute.end).format('HH:mm');
+        absolute.startDate = dayjs.tz(absolute.start).format('MM/DD/YYYY');
+        absolute.startTime = dayjs.tz(absolute.start).format('HH:mm');
+        absolute.endDate = dayjs.tz(absolute.end).format('MM/DD/YYYY');
+        absolute.endTime = dayjs.tz(absolute.end).format('HH:mm');
         setAbsoluteValue(absolute);
       }
     } else {
@@ -550,7 +558,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;
   useEffect(function () {
     return setInvalidState(invalid || disableApply);
@@ -1264,6 +1272,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/es/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -800,7 +800,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,
@@ -815,8 +814,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 PICKER_KINDS.SINGLE:

package/es/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js

@@ -20,7 +20,7 @@ import warning from 'warning';
 import { useLangDirection } from '../../utils/useLangDirection.js';
 import TimePickerSpinner from '../TimePickerSpinner/TimePickerSpinner.js';
 import { settings } from '../../constants/Settings.js';
-import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS, detectDateTimeFormat } from '../../utils/dayjs.js';
 import { PICKER_KINDS, INTERVAL_VALUES, PRESET_VALUES, RELATIVE_VALUES } from '../../constants/DateConstants.js';
 import Button from '../Button/Button.js';
 import FlyoutMenu, { FlyoutMenuButtonSize, FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu.js';
@@ -28,7 +28,7 @@ import { useOnClickOutside, handleSpecificKeyDown } from '../../utils/componentU
 import { useDateTimePickerRangeKind, useAbsoluteDateTimeValue, useRelativeDateTimeValue, useDateTimePickerKeyboardInteraction, getIntervalValue, useCloseDropdown, useCustomHeight, parseValue, invalidEndDate, invalidStartDate, useDateTimePickerClickOutside } from './dateTimePickerUtils.js';
 import { WarningFilled, Calendar } from '@carbon/icons-react';
 
-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(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.iotPrefix,
@@ -138,6 +138,8 @@ var propTypes = {
   light: PropTypes.bool,
   /** The language locale used to format the days of the week, months, and numbers. */
   locale: PropTypes.string,
+  /** IANA timezone string to set as default timezone for dayjs */
+  timeZone: PropTypes.string,
   /** Unique id of the component */
   id: PropTypes.string,
   /** Optionally renders only an icon rather than displaying the current selected time */
@@ -228,6 +230,7 @@ var defaultProps = {
   },
   light: false,
   locale: 'en',
+  timeZone: undefined,
   id: undefined,
   hasIconOnly: false,
   menuOffset: undefined,
@@ -256,6 +259,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,
@@ -263,6 +267,9 @@ var DateTimePicker = function DateTimePicker(_ref) {
     style = _ref.style,
     buttonProps = _ref.buttonProps,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
+  dayjs.locale(locale);
   var id = useRef(others.id || v4()).current;
   React__default.useEffect(function () {
     {
@@ -402,7 +409,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = PICKER_KINDS.PRESET;
     }
     setCurrentValue(value);
-    var parsedValue = parseValue(value, dateTimeMask, mergedI18n.toLabel);
+    var parsedValue = parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput, effectiveTimezone);
     setHumanValue(parsedValue.readableValue);
     return _objectSpread(_objectSpread({}, value), parsedValue);
   };
@@ -457,15 +464,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
         setIsCustomRange(true);
         setCustomRangeKind(PICKER_KINDS.ABSOLUTE);
         if (!absolute.hasOwnProperty('start')) {
-          absolute.start = dayjs("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
+          var startDateTime = "".concat(absolute.startDate, " ").concat(absolute.startTime);
+          absolute.start = dayjs.tz(startDateTime, detectDateTimeFormat(startDateTime), effectiveTimezone).valueOf();
         }
         if (!absolute.hasOwnProperty('end')) {
-          absolute.end = dayjs("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
+          var endDateTime = "".concat(absolute.endDate, " ").concat(absolute.endTime);
+          absolute.end = dayjs.tz(endDateTime, detectDateTimeFormat(endDateTime), effectiveTimezone).valueOf();
         }
-        absolute.startDate = dayjs(absolute.start).format('MM/DD/YYYY');
-        absolute.startTime = dayjs(absolute.start).format('HH:mm');
-        absolute.endDate = dayjs(absolute.end).format('MM/DD/YYYY');
-        absolute.endTime = dayjs(absolute.end).format('HH:mm');
+        absolute.startDate = dayjs.tz(absolute.start).format('MM/DD/YYYY');
+        absolute.startTime = dayjs.tz(absolute.start).format('HH:mm');
+        absolute.endDate = dayjs.tz(absolute.end).format('MM/DD/YYYY');
+        absolute.endTime = dayjs.tz(absolute.end).format('HH:mm');
         setAbsoluteValue(absolute);
       }
     } else {
@@ -512,7 +521,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;
   useEffect(function () {
     return setInvalidState(invalid || disableApply);
@@ -1206,6 +1215,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/es/components/DateTimePicker/dateTimePickerUtils.js

@@ -82,7 +82,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) {
@@ -102,9 +102,9 @@ var parseValue = function parseValue(timeRange, dateTimeMask, toLabel, hasTimeIn
   switch (kind) {
     case PICKER_KINDS.RELATIVE:
       {
-        var endDate = dayjs();
+        var endDate = dayjs.tz();
         if (value.relativeToWhen !== '') {
-          endDate = value.relativeToWhen === RELATIVE_VALUES.YESTERDAY ? dayjs().add(-1, INTERVAL_VALUES.DAYS) : dayjs();
+          endDate = value.relativeToWhen === RELATIVE_VALUES.YESTERDAY ? dayjs.tz().subtract(1, INTERVAL_VALUES.DAYS) : dayjs.tz();
           // wait to parse it until fully typed
           if (value.relativeToTime.length === 5) {
             endDate = endDate.hour(Number(value.relativeToTime.split(':')[0]));
@@ -116,37 +116,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(startDate).format(dateTimeMask), " ").concat(toLabel, " ").concat(dayjs(endDate).format(dateTimeMask));
+          readableValue = "".concat(startDate.format(dateTimeMask), " ").concat(toLabel, " ").concat(endDate.format(dateTimeMask));
         }
         break;
       }
     case PICKER_KINDS.ABSOLUTE:
       {
-        var _value$start, _value$end;
-        var _startDate = dayjs((_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(_startDate).format(dateTimeMask)) : "".concat(dayjs(_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((_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(value.start).tz(timeZone, true) // Date from picker - preserve local time
+          : value.start ? dayjs.tz(value.start) // Timestamp - convert from UTC
+          : dayjs.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(value.end).tz(timeZone, true) : value.end ? dayjs(value.end).tz(timeZone) : dayjs.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(_endDate).format(dateTimeMask)) : "".concat(dayjs(_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;
       }
@@ -577,7 +582,7 @@ var getIntervalValue = function getIntervalValue(_ref7) {
     humanValue = _ref7.humanValue;
   if (currentValue) {
     if (currentValue.kind === PICKER_KINDS.PRESET) {
-      return "".concat(dayjs().subtract(currentValue.preset.offset, 'minutes').format(dateTimeMask), " ").concat(mergedI18n.toNowLabel);
+      return "".concat(dayjs.tz().subtract(currentValue.preset.offset, 'minutes').format(dateTimeMask), " ").concat(mergedI18n.toNowLabel);
     }
     return humanValue;
   }

package/es/components/ImageCard/ImageCard.js

@@ -26,11 +26,12 @@ import Card from '../Card/Card.js';
 import { getUpdatedCardSize, getResizeHandles } from '../../utils/cardUtilityFunctions.js';
 import { validHotspotIcons, validThresholdIcons } from '../DashboardEditor/editorUtils.js';
 import { settings } from '../../constants/Settings.js';
+import dayjs from '../../utils/dayjs.js';
 import ImageHotspots from './ImageHotspots.js';
 import ImageUploader from './ImageUploader.js';
 import { Image, Warning } from '@carbon/icons-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(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.iotPrefix;
@@ -52,6 +53,7 @@ var defaultProps = {
     }
   },
   locale: 'en',
+  timeZone: undefined,
   content: {},
   maxFileSizeInBytes: 1048576,
   accept: null,
@@ -111,7 +113,10 @@ var ImageCard = function ImageCard(_ref) {
     onBrowseClick = _ref.onBrowseClick,
     testID = _ref.testID,
     testId = _ref.testId,
+    timeZone = _ref.timeZone,
     others = _objectWithoutProperties(_ref, _excluded);
+  var effectiveTimezone = timeZone || dayjs.tz.guess();
+  dayjs.tz.setDefault(effectiveTimezone);
   var _useState = useState(content),
     _useState2 = _slicedToArray(_useState, 2),
     imgContent = _useState2[0],
@@ -170,7 +175,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
@@ -246,6 +252,13 @@ ImageCard.__docgenInfo = {
       },
       "required": false
     },
+    "timeZone": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "required": false
+    },
     "content": {
       "defaultValue": {
         "value": "{}",