carbon-addons-iot-react 4.0.8 → 4.0.9

package/es/components/BarChartCard/BarChartCard.js

@@ -30,7 +30,7 @@ import { settings } from '../../constants/Settings.js';
 import { handleCardVariables, increaseSmallCardSize, getResizeHandles, chartValueFormatter } from '../../utils/cardUtilityFunctions.js';
 import StatefulTable from '../Table/StatefulTable.js';
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions.js';
-import dayjs from '../../utils/dayjs.js';
+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';
 
@@ -60,9 +60,9 @@ var defaultProps = {
   },
   locale: 'en',
   showTimeInGMT: false,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
+  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
   values: null,
-  defaultDateFormatPattern: 'L HH:mm'
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS
 };
 var BarChartCard = function BarChartCard(_ref) {
   var titleProp = _ref.title,
@@ -387,8 +387,8 @@ BarChartCard.__docgenInfo = {
     },
     "tooltipDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm:ss'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     },
@@ -401,8 +401,8 @@ BarChartCard.__docgenInfo = {
     },
     "defaultDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     }

package/es/components/BarChartCard/barChartUtils.js

@@ -20,7 +20,7 @@ import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.string.iterator.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { BAR_CHART_TYPES, BAR_CHART_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants.js';
 import { CHART_COLORS } from '../../constants/CardPropTypes.js';
 import { convertStringsToDOMElement } from '../../utils/componentUtilityFunctions.js';
@@ -434,7 +434,7 @@ var formatColors = function formatColors(series, datasetNames, isDashboardPrevie
  * @param {string} tooltipDataFormatPattern
  */
 var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip, _datum, timeDataSourceId, showTimeInGMT) {
-  var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'L HH:mm:ss';
+  var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : DAYJS_INPUT_FORMATS.SECONDS;
   var locale = arguments.length > 6 ? arguments[6] : undefined;
   dayjs.locale(locale);
   var data = dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
@@ -518,7 +518,7 @@ var generateTableColumns = function generateTableColumns(timeDataSourceId, categ
  * @param {Array<Object>} chartData values after they are formatted for charting
  */
 var formatTableData = function formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData) {
-  var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'L HH:mm';
+  var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : DAYJS_INPUT_FORMATS.SECONDS;
   var tableData = [];
   if (!isNil(values) && !isNil(chartData)) {
     if (timeDataSourceId) {

package/es/components/Card/Card.js

@@ -30,6 +30,7 @@ import { getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunc
 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 CardTypeContent from './CardTypeContent.js';
 import CardToolbar from './CardToolbar.js';
 import { CardTitle } from './CardTitle.js';
@@ -246,7 +247,7 @@ var defaultProps = {
   tooltip: undefined,
   titleTextTooltip: undefined,
   footerContent: undefined,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   padding: 'default',
   overrides: undefined,
   type: null,
@@ -746,8 +747,8 @@ Card.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "required": false
     },

package/es/components/Card/CardToolbar.js

@@ -24,6 +24,7 @@ import { CARD_ACTIONS } from '../../constants/LayoutConstants.js';
 import DateTimePickerOld, { DateTimePickerDefaultValuePropTypes } from '../DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js';
 import Button from '../Button/Button.js';
 import { PRESET_VALUES } from '../../constants/DateConstants.js';
+import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import CardRangePicker, { CardRangePickerPropTypes } from './CardRangePicker.js';
 import { Settings, Close, Popup } from '@carbon/icons-react';
 
@@ -111,7 +112,7 @@ var defaultProps = {
     extraActionLabel: 'Action Label'
   },
   testId: 'card-toolbar',
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   renderDateDropdownInPortal: true
 };
 var CardToolbar = function CardToolbar(_ref) {
@@ -459,8 +460,8 @@ CardToolbar.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "description": "",
       "type": {

package/es/components/ComboChartCard/ComboChartCard.js

@@ -22,6 +22,7 @@ import { CardPropTypes, ComboChartPropTypes } from '../../constants/CardPropType
 import { settings } from '../../constants/Settings.js';
 import StatefulTable from '../Table/StatefulTable.js';
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions.js';
+import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { useChartOptions, useChartData, useTableColumns, useTableData } from './comboChartHelpers.js';
 
 var _excluded = ["className", "children", "content", "title", "size", "values", "availableDimensions", "locale", "i18n", "isExpanded", "isLazyLoading", "isEditable", "isDashboardPreview", "isLoading", "isResizable", "interval", "domainRange", "showTimeInGMT", "timeRange", "tooltipDateFormatPattern", "testID", "testId", "defaultDateFormatPattern"];
@@ -47,8 +48,8 @@ var defaultProps = {
   },
   showTimeInGMT: false,
   domainRange: null,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
-  defaultDateFormatPattern: 'L HH:mm'
+  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS
 };
 var ComboChartCard = function ComboChartCard(_ref) {
   var className = _ref.className,
@@ -242,15 +243,15 @@ ComboChartCard.__docgenInfo = {
     },
     "tooltipDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm:ss'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     },
     "defaultDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     }

package/es/components/DateTimePicker/DateTimePicker.js

@@ -6,20 +6,19 @@ import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.object.get-own-property-descriptor.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
-import React__default, { useEffect, useState, useRef, useMemo } from 'react';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { OrderedList, ListItem, FormGroup, RadioButtonGroup, RadioButton, NumberInput, Select, SelectItem, DatePicker, DatePickerInput, Button } from '@carbon/react';
 import classnames from 'classnames';
 import { v4 } from 'uuid';
 import TimePickerSpinner from '../TimePickerSpinner/TimePickerSpinner.js';
 import { settings } from '../../constants/Settings.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { useOnClickOutside, handleSpecificKeyDown } from '../../utils/componentUtilityFunctions.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { useDateTimePickerRangeKind, useDateTimePickerKeyboardInteraction, useDateTimePickerRef, useDateTimePickerFocus, useAbsoluteDateTimeValue, useRelativeDateTimeValue, useCloseDropdown, getIntervalValue, parseValue, invalidEndDate, invalidStartDate, useDateTimePickerClickOutside } from './dateTimePickerUtils.js';
@@ -177,7 +176,7 @@ var propTypes = {
 var defaultProps = {
   testId: 'date-time-picker',
   defaultValue: null,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   presets: PRESET_VALUES,
   intervals: [{
     label: 'minutes',
@@ -271,13 +270,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     style = _ref.style,
     others = _objectWithoutProperties(_ref, _excluded);
   var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
-
-  // make sure locale is 2 letters
-  var newLocale = (locale === null || locale === void 0 ? void 0 : locale.length) === 2 ? locale : locale.slice(0, 2);
-  // initialize the dayjs locale
-  useEffect(function () {
-    dayjs.locale(newLocale);
-  }, [newLocale]);
+  dayjs.locale(locale);
 
   // State
   var _useDateTimePickerRan = useDateTimePickerRangeKind(showRelativeOption),
@@ -745,7 +738,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     ref: pickerRefCallback,
     onChange: onDatePickerChange,
     value: absoluteValue ? [absoluteValue.startDate, absoluteValue.endDate] : '',
-    locale: newLocale
+    locale: locale === null || locale === void 0 ? void 0 : locale.split('-')[0]
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
     labelText: "",
     id: "".concat(id, "-date-picker-input-start"),
@@ -993,8 +986,8 @@ DateTimePicker.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "description": "the dayjs.js format for the human readable interval value",
       "type": {

package/es/components/DateTimePicker/DateTimePickerV2.js

@@ -1,13 +1,12 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.object.get-own-property-descriptor.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import DateTimePickerNew, { propTypes, defaultProps } from './DateTimePickerV2WithTimeSpinner.js';
@@ -46,8 +45,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
     useAutoPositioning = _ref.useAutoPositioning,
     style = _ref.style,
     others = _objectWithoutProperties(_ref, _excluded);
-  // make sure locale is 2 letters
-  var newLocale = (locale === null || locale === void 0 ? void 0 : locale.length) === 2 ? locale : locale.slice(0, 2);
   return useNewTimeSpinner ? /*#__PURE__*/React__default.createElement(DateTimePickerNew, {
     testId: testId,
     defaultValue: defaultValue,
@@ -68,7 +65,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onClear: onClear,
     i18n: i18n,
     light: light,
-    locale: newLocale,
+    locale: locale,
     id: id,
     hasIconOnly: hasIconOnly,
     menuOffset: menuOffset,
@@ -95,7 +92,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onApply: onApply,
     i18n: i18n,
     light: light,
-    locale: newLocale,
+    locale: locale,
     id: id,
     hasIconOnly: hasIconOnly,
     menuOffset: menuOffset,

package/es/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.js

@@ -25,7 +25,7 @@ import { useLangDirection } from 'use-lang-direction';
 import TimePickerSpinner from '../TimePickerSpinner/TimePickerSpinner.js';
 import TimePickerDropdown from '../TimePicker/TimePickerDropdown.js';
 import { settings } from '../../constants/Settings.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { PICKER_KINDS, PRESET_VALUES, INTERVAL_VALUES, RELATIVE_VALUES } from '../../constants/DateConstants.js';
 import Button from '../Button/Button.js';
 import FlyoutMenu, { FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu.js';
@@ -181,7 +181,7 @@ var dateTimePickerId = v4();
 var defaultProps = {
   testId: 'date-time-picker',
   defaultValue: null,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   presets: PRESET_VALUES,
   intervals: [{
     label: 'minutes',
@@ -1029,7 +1029,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onChange: datePickerType === 'single' ? onSingleDatePickerChange : onDatePickerChange,
     onClose: onDatePickerClose,
     value: absoluteValue && datePickerType === 'range' ? [absoluteValue.startDate, absoluteValue.endDate] : singleDateValue && datePickerType === 'single' ? [singleDateValue === null || singleDateValue === void 0 ? void 0 : singleDateValue.startDate] : null,
-    locale: locale,
+    locale: locale === null || locale === void 0 ? void 0 : locale.split('-')[0],
     closeOnSelect: false
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
     labelText: "",
@@ -1146,8 +1146,8 @@ DateTimePicker.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "description": "the dayjs.js format for the human readable interval value",
       "type": {

package/es/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js

@@ -20,7 +20,7 @@ import warning from 'warning';
 import { useLangDirection } from 'use-lang-direction';
 import TimePickerSpinner from '../TimePickerSpinner/TimePickerSpinner.js';
 import { settings } from '../../constants/Settings.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } 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, { FlyoutMenuDirection } from '../FlyoutMenu/FlyoutMenu.js';
@@ -155,7 +155,7 @@ var propTypes = {
 var defaultProps = {
   testId: 'date-time-picker',
   defaultValue: null,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   presets: PRESET_VALUES,
   intervals: [{
     label: 'minutes',
@@ -823,7 +823,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onChange: onDatePickerChange,
     onClose: onDatePickerClose,
     value: absoluteValue ? [absoluteValue.startDate, absoluteValue.endDate] : '',
-    locale: locale
+    locale: locale === null || locale === void 0 ? void 0 : locale.split('-')[0]
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, {
     labelText: "",
     "aria-label": mergedI18n.startAriaLabel,
@@ -934,8 +934,8 @@ DateTimePicker.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "description": "the dayjs.js format for the human readable interval value",
       "type": {

package/es/components/TableCard/TableCard.js

@@ -2,7 +2,6 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import isFinite from '../../node_modules/lodash-es/isFinite.js';
 import capitalize from '../../node_modules/lodash-es/capitalize.js';
 import cloneDeep from '../../node_modules/lodash-es/cloneDeep.js';
 import uniqBy from '../../node_modules/lodash-es/uniqBy.js';
@@ -29,7 +28,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import { Link, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { CardPropTypes, TableCardPropTypes } from '../../constants/CardPropTypes.js';
 import Card, { defaultProps as defaultProps$1 } from '../Card/Card.js';
 import { CARD_SIZES } from '../../constants/LayoutConstants.js';
@@ -86,7 +85,7 @@ var defaultProps = {
   },
   renderDateDropdownInPortal: true,
   withToolbarTooltips: false,
-  defaultDateFormatPattern: 'L HH:mm'
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS
 };
 var TableCard = function TableCard(_ref) {
   var _availableActions$ran;
@@ -299,7 +298,7 @@ var TableCard = function TableCard(_ref) {
     return tableData.map(function (row) {
       var values = _objectSpread({}, row.values);
       Object.keys(values).forEach(function (column) {
-        if (!isEditable && isFinite(values[column]) && filteredTimestampColumns.includes(column)) {
+        if (!isEditable && filteredTimestampColumns.includes(column)) {
           values[column] = values[column] ? dayjs(values[column]).format(defaultDateFormatPattern) : '';
         }
       });
@@ -476,7 +475,8 @@ var TableCard = function TableCard(_ref) {
     width: newSize.width,
     timeRange: timeRange,
     timeRangeOptions: timeRangeOptions,
-    renderDateDropdownInPortal: renderDateDropdownInPortal
+    renderDateDropdownInPortal: renderDateDropdownInPortal,
+    locale: locale
   });
   var resizeHandles = isResizable ? getResizeHandles(children) : [];
   return /*#__PURE__*/React__default.createElement(Card, _extends({
@@ -640,8 +640,8 @@ TableCard.__docgenInfo = {
     },
     "defaultDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     }

package/es/components/TableCard/tableCardUtils.js

@@ -17,7 +17,7 @@ import 'core-js/modules/web.dom-collections.for-each.js';
 import React__default from 'react';
 import { Link } from '@carbon/react';
 import { formatNumberWithPrecision, getVariables } from '../../utils/cardUtilityFunctions.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 
 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; }
@@ -42,7 +42,7 @@ var determinePrecisionAndValue = function determinePrecisionAndValue() {
  * @return {array} array of columns with formatted links and updated variable values
  */
 var createColumnsWithFormattedLinks = function createColumnsWithFormattedLinks(columns) {
-  var defaultDateFormatPattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'L HH:mm';
+  var defaultDateFormatPattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DAYJS_INPUT_FORMATS.SECONDS;
   return columns.map(function (column) {
     var linkTemplate = column.linkTemplate;
     if (linkTemplate) {
@@ -128,7 +128,7 @@ var handleExpandedItemLinks = function handleExpandedItemLinks(row, expandedRow,
  * @returns  what the filter object should be
  */
 var determineFilterFunction = function determineFilterFunction(column, defaultFilterStringPlaceholdText) {
-  var defaultDateFormatPattern = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'L HH:mm';
+  var defaultDateFormatPattern = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DAYJS_INPUT_FORMATS.SECONDS;
   return _objectSpread(_objectSpread({}, column.type === 'TIMESTAMP' ? {
     filterFunction: function filterFunction(cellValue, filterValue) {
       var dateString = dayjs(cellValue).format(defaultDateFormatPattern);

package/es/components/TimeSeriesCard/TimeSeriesCard.js

@@ -36,7 +36,7 @@ import StatefulTable from '../Table/StatefulTable.js';
 import { settings } from '../../constants/Settings.js';
 import { handleCardVariables, getUpdatedCardSize, chartValueFormatter, getResizeHandles, handleTooltip } from '../../utils/cardUtilityFunctions.js';
 import deprecate from '../../internal/deprecate.js';
-import dayjs from '../../utils/dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import { generateSampleValues, formatGraphTick, formatColors, formatChartData, applyStrokeColor, applyFillColor, applyIsFilled } from './timeSeriesUtils.js';
 
@@ -171,9 +171,9 @@ var defaultProps = {
   interval: 'hour',
   showTimeInGMT: false,
   domainRange: null,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
+  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
   tooltipShowTotals: true,
-  defaultDateFormatPattern: 'L HH:mm'
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS
 };
 var TimeSeriesCard = function TimeSeriesCard(_ref) {
   var titleProp = _ref.title,
@@ -832,8 +832,8 @@ TimeSeriesCard.__docgenInfo = {
     },
     "tooltipDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm:ss'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "description": "tooltip format pattern that follows the dayjs formatting patterns",
       "type": {
@@ -854,8 +854,8 @@ TimeSeriesCard.__docgenInfo = {
     },
     "defaultDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "description": "default date format pattern that follows the dayjs formatting patterns",
       "type": {

package/es/utils/cardUtilityFunctions.js

@@ -57,7 +57,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import React__default, { useState, useMemo } from 'react';
 import warning from 'warning';
 import { CARD_SIZES } from '../constants/LayoutConstants.js';
-import dayjs from './dayjs.js';
+import dayjs, { DAYJS_INPUT_FORMATS } from './dayjs.js';
 import { convertStringsToDOMElement } from './componentUtilityFunctions.js';
 
 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; }
@@ -530,7 +530,7 @@ var findMatchingAlertRange = function findMatchingAlertRange(alertRanges, data)
  */
 var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip, _datum, alertRanges, alertDetected, showTimeInGMT) {
   var _data$, _data$date;
-  var tooltipDateFormatPattern = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'L HH:mm:ss';
+  var tooltipDateFormatPattern = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : DAYJS_INPUT_FORMATS.SECONDS;
   var locale = arguments.length > 7 ? arguments[7] : undefined;
   dayjs.locale(locale);
   var data = /* eslint-disable no-underscore-dangle */dataOrHoveredElement !== null && dataOrHoveredElement !== void 0 && dataOrHoveredElement.__data__ ? dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle

package/es/utils/dayjs.js

@@ -439,6 +439,10 @@ var loadLocales = function loadLocales() {
   dayjs.locale('en');
 };
 loadLocales();
+var DAYJS_INPUT_FORMATS = {
+  SECONDS: 'L HH:mm:ss',
+  RANGE: 'L HH:mm'
+};
 var dayjs$1 = dayjs;
 
-export { dayjs$1 as default };
+export { DAYJS_INPUT_FORMATS, dayjs$1 as default };

package/lib/components/BarChartCard/BarChartCard.js

@@ -62,9 +62,9 @@ var defaultProps = {
   },
   locale: 'en',
   showTimeInGMT: false,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
+  tooltipDateFormatPattern: dayjs.DAYJS_INPUT_FORMATS.SECONDS,
   values: null,
-  defaultDateFormatPattern: 'L HH:mm'
+  defaultDateFormatPattern: dayjs.DAYJS_INPUT_FORMATS.SECONDS
 };
 var BarChartCard = function BarChartCard(_ref) {
   var titleProp = _ref.title,
@@ -179,7 +179,7 @@ var BarChartCard = function BarChartCard(_ref) {
     return barChartUtils.formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData, defaultDateFormatPattern);
   }, [categoryDataSourceId, chartData, defaultDateFormatPattern, timeDataSourceId, type, values]);
   var previousTick = React.useRef();
-  dayjs.locale(locale);
+  dayjs.default.locale(locale);
   var maxTicksPerSize = React.useMemo(function () {
     return barChartUtils.getMaxTicksPerSize(sizeProp);
   }, [sizeProp]);
@@ -389,8 +389,8 @@ BarChartCard.__docgenInfo = {
     },
     "tooltipDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm:ss'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     },
@@ -403,8 +403,8 @@ BarChartCard.__docgenInfo = {
     },
     "defaultDateFormatPattern": {
       "defaultValue": {
-        "value": "'L HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.SECONDS",
+        "computed": true
       },
       "required": false
     }

package/lib/components/BarChartCard/barChartUtils.js

@@ -70,7 +70,7 @@ var generateSampleValues = function generateSampleValues(series, timeDataSourceI
     return series.reduce(function (sampleData, _ref) {
       var dataSourceId = _ref.dataSourceId;
       var now = timeRangeType === 'periodToDate' // handle "this" intervals like "this week"
-      ? dayjs().startOf(timeRangeInterval).subtract(1, timeGrain) : dayjs().subtract(count, timeGrain);
+      ? dayjs.default().startOf(timeRangeInterval).subtract(1, timeGrain) : dayjs.default().subtract(count, timeGrain);
       // eslint-disable-next-line no-plusplus
       var _loop = function _loop() {
         var nextTimeStamp = now.add(1, timeGrain).valueOf();
@@ -169,7 +169,7 @@ var generateSampleValuesForEditor = function generateSampleValuesForEditor(serie
     series.forEach(function (_ref2) {
       var dataSourceId = _ref2.dataSourceId;
       var now = timeRangeType === 'periodToDate' // handle "this" intervals like "this week"
-      ? dayjs().startOf(timeRangeInterval).subtract(1, timeGrain) : dayjs().subtract(count, timeGrain);
+      ? dayjs.default().startOf(timeRangeInterval).subtract(1, timeGrain) : dayjs.default().subtract(count, timeGrain);
       // create 4 random dataSets
       // eslint-disable-next-line no-plusplus
       var _loop4 = function _loop4() {
@@ -436,9 +436,9 @@ var formatColors = function formatColors(series, datasetNames, isDashboardPrevie
  * @param {string} tooltipDataFormatPattern
  */
 var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip, _datum, timeDataSourceId, showTimeInGMT) {
-  var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'L HH:mm:ss';
+  var tooltipDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : dayjs.DAYJS_INPUT_FORMATS.SECONDS;
   var locale = arguments.length > 6 ? arguments[6] : undefined;
-  dayjs.locale(locale);
+  dayjs.default.locale(locale);
   var data = dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
   ? dataOrHoveredElement.__data__ // eslint-disable-line no-underscore-dangle
   : dataOrHoveredElement;
@@ -452,7 +452,7 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
     // 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>") : '';
+    ? dayjs.default.utc(timestamp) : dayjs.default(timestamp)).format(tooltipDateFormatPattern), "</p>\n          </li>") : '';
     var _convertStringsToDOME3 = componentUtilityFunctions.convertStringsToDOMElement([dateLabel]),
       _convertStringsToDOME4 = _slicedToArray(_convertStringsToDOME3, 1),
       parsedDateLabel = _convertStringsToDOME4[0];
@@ -520,7 +520,7 @@ var generateTableColumns = function generateTableColumns(timeDataSourceId, categ
  * @param {Array<Object>} chartData values after they are formatted for charting
  */
 var formatTableData = function formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData) {
-  var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'L HH:mm';
+  var defaultDateFormatPattern = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : dayjs.DAYJS_INPUT_FORMATS.SECONDS;
   var tableData = [];
   if (!isNil(values) && !isNil(chartData)) {
     if (timeDataSourceId) {
@@ -542,7 +542,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.default(timestamp).format(defaultDateFormatPattern))),
           isSelectable: false
         });
       });

package/lib/components/Card/Card.js

@@ -34,6 +34,7 @@ var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var dateTimePickerUtils = require('../DateTimePicker/dateTimePickerUtils.js');
 var useSizeObserver = require('../../hooks/useSizeObserver.js');
 var EmptyState = require('../EmptyState/EmptyState.js');
+var dayjs = require('../../utils/dayjs.js');
 var CardTypeContent = require('./CardTypeContent.js');
 var CardToolbar = require('./CardToolbar.js');
 var CardTitle = require('./CardTitle.js');
@@ -250,7 +251,7 @@ var defaultProps = {
   tooltip: undefined,
   titleTextTooltip: undefined,
   footerContent: undefined,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: dayjs.DAYJS_INPUT_FORMATS.RANGE,
   padding: 'default',
   overrides: undefined,
   type: null,
@@ -750,8 +751,8 @@ Card.__docgenInfo = {
     },
     "dateTimeMask": {
       "defaultValue": {
-        "value": "'YYYY-MM-DD HH:mm'",
-        "computed": false
+        "value": "DAYJS_INPUT_FORMATS.RANGE",
+        "computed": true
       },
       "required": false
     },