@atlaskit/datetime-picker 10.4.2 → 11.1.0

package/dist/esm/components/DatePicker.js

@@ -7,9 +7,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,23 +16,25 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
-import styled from '@emotion/styled'; // eslint-disable-next-line no-restricted-imports
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
 
-import { format, isValid, lastDayOfMonth, parse } from 'date-fns';
+import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { B100, N20 } from '@atlaskit/theme/colors';
+import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize, layers } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/FixedLayer';
+import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "10.4.2";
+var packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -47,19 +46,26 @@ function getDateObj(date) {
 }
 
 function getValidDate(iso) {
-  var date = parse(iso);
+  var date = parseISO(iso);
   return isValid(date) ? getDateObj(date) : {};
 }
 
-var StyledMenu = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  z-index: ", ";\n  ", ";\n"])), N20, borderRadius(), layers.dialog, e200());
+var menuStyles = css({
+  zIndex: layers.dialog(),
+  backgroundColor: token('color.background.default', N20),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A))
+});
 
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
       innerProps = _ref.innerProps;
-  return /*#__PURE__*/React.createElement(FixedLayer, {
+  return jsx(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: /*#__PURE__*/React.createElement(StyledMenu, innerProps, /*#__PURE__*/React.createElement(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+    content: jsx("div", _extends({
+      css: menuStyles
+    }, innerProps), jsx(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
       disabled: selectProps.calendarDisabled,
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
@@ -102,8 +108,8 @@ var datePickerDefaultProps = {
 
 };
 
-var DatePicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(DatePicker, _React$Component);
+var DatePicker = /*#__PURE__*/function (_Component) {
+  _inherits(DatePicker, _Component);
 
   var _super = _createSuper(DatePicker);
 
@@ -220,7 +226,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           _this.setState({
-            view: format(parsed, 'YYYY-MM-DD')
+            view: format(parsed, convertTokens('YYYY-MM-DD'))
           });
         }
       }
@@ -308,7 +314,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       var changedState = {
         selectedValue: '',
         value: '',
-        view: _this.props.defaultValue || format(new Date(), 'YYYY-MM-DD')
+        view: _this.props.defaultValue || format(new Date(), convertTokens('YYYY-MM-DD'))
       };
 
       if (!_this.props.hideIcon) {
@@ -358,7 +364,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function (isOpen) {
       return {
-        border: "2px solid ".concat(isOpen ? B100 : "transparent"),
+        border: "2px solid ".concat(isOpen ? token('color.border.focus', B100) : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       };
@@ -391,13 +397,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
 
-      var date = parse(value);
-
-      if (dateFormat) {
-        return format(date, dateFormat);
-      }
-
-      return l10n.formatDate(date);
+      var date = parseISO(value);
+      return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
     });
 
     _defineProperty(_assertThisInitialized(_this), "getPlaceholder", function () {
@@ -497,26 +498,26 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
-        calendarValue: value && format(parse(value), 'YYYY-MM-DD'),
+        calendarValue: value && format(parseISO(value), convertTokens('YYYY-MM-DD')),
         calendarView: view,
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay
       };
-      return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      return jsx("div", _extends({}, innerProps, {
         role: "presentation",
         onClick: this.onInputClick,
         onInput: this.onSelectInput,
         onKeyDown: this.onSelectKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
-      }), /*#__PURE__*/React.createElement("input", {
+      }), jsx("input", {
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), /*#__PURE__*/React.createElement(Select, _extends({
+      }), jsx(Select, _extends({
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
         closeMenuOnSelect: true,
@@ -555,7 +556,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return DatePicker;
-}(React.Component);
+}(Component);
 
 _defineProperty(DatePicker, "defaultProps", datePickerDefaultProps);
 

package/dist/esm/components/DateTimePicker.js

@@ -6,9 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -18,103 +15,92 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from '@emotion/styled'; // eslint-disable-next-line no-restricted-imports
+import { css, jsx } from '@emotion/core'; // eslint-disable-next-line no-restricted-imports
 
-import { format, isValid, parse } from 'date-fns';
+import { format, isValid, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { mergeStyles } from '@atlaskit/select';
-import * as colors from '@atlaskit/theme/colors';
+import { B100, N0, N20, N30, N500, N70, R400 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
 import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
+import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "10.4.2";
+var packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
-var getBorder = function getBorder(_ref) {
-  var appearance = _ref.appearance,
-      isFocused = _ref.isFocused,
-      isInvalid = _ref.isInvalid;
-  var color = colors.N20;
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
-  }
-
-  if (isFocused) {
-    color = colors.B100;
-  }
-
-  if (isInvalid) {
-    color = colors.R400;
-  }
-
-  return "border: 2px solid ".concat(color, ";");
-};
-
-var getBorderColorHover = function getBorderColorHover(_ref2) {
-  var isFocused = _ref2.isFocused,
-      isInvalid = _ref2.isInvalid,
-      isDisabled = _ref2.isDisabled;
-  var color = colors.N30;
-
-  if (isFocused || isDisabled) {
-    return "";
-  }
-
-  if (isInvalid) {
-    color = colors.R400;
-  }
-
-  return "border-color: ".concat(color, ";");
-};
-
-var getBackgroundColor = function getBackgroundColor(_ref3) {
-  var appearance = _ref3.appearance,
-      isFocused = _ref3.isFocused;
-  var color = colors.N20;
-
-  if (isFocused) {
-    color = colors.N0;
+var isInvalidBorderStyles = css({
+  borderColor: token('color.iconBorder.danger', R400)
+});
+var isFocusedBorderStyles = css({
+  borderColor: token('color.border.focus', B100)
+});
+var isFocusedStyles = css({
+  backgroundColor: token('color.background.default', N0)
+});
+var subtleBgStyles = css({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+});
+var hoverStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.default', N30),
+    borderColor: token('color.border.neutral', N30)
   }
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
+});
+var isInvalidHoverStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.default', N0),
+    borderColor: token('color.iconBorder.danger', R400)
   }
-
-  return "background-color: ".concat(color, ";");
-};
-
-var getBackgroundColorHover = function getBackgroundColorHover(_ref4) {
-  var isFocused = _ref4.isFocused,
-      isInvalid = _ref4.isInvalid,
-      isDisabled = _ref4.isDisabled;
-  var color = colors.N30;
-
-  if (isFocused || isDisabled) {
-    return "";
+});
+var isDisabledStyles = css({
+  '&:hover': {
+    cursor: 'default'
   }
-
-  if (isInvalid) {
-    color = colors.N0;
+});
+var baseContainerStyles = css({
+  display: 'flex',
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  border: "2px solid ".concat(token('color.border.neutral', N20)),
+  borderRadius: "".concat(borderRadius(), "px"),
+  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
+  '&:hover': {
+    cursor: 'pointer'
   }
-
-  return "background-color: ".concat(color, ";");
-};
-
-var Flex = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: ", "px;\n  display: flex;\n  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;\n  &:hover {\n    cursor: ", ";\n    ", "\n    ", "\n  }\n"])), getBackgroundColor, getBorder, borderRadius(), function (props) {
-  return props.isDisabled ? 'default' : 'pointer';
-}, getBackgroundColorHover, getBorderColorHover); // Make DatePicker 50% the width of DateTimePicker
+}); // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 
-var DatePickerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n  flex-grow: 1;\n  flex-shrink: 0;\n"])));
-var TimePickerContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-basis: 50%;\n  flex-grow: 1;\n"])));
+var datePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+var timePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1
+});
 var ICON_PADDING = 2;
-var IconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-basis: inherit;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  transition: color 150ms;\n  &:hover {\n    color: ", ";\n  }\n"])), ICON_PADDING * 2, gridSize(), colors.N70, colors.N500); // react-select overrides (via @atlaskit/select).
+var iconContainerStyles = css({
+  display: 'flex',
+  paddingTop: "6px",
+  paddingRight: "".concat(gridSize(), "px"),
+  paddingBottom: "6px",
+  paddingLeft: "".concat(ICON_PADDING * 2, "px"),
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: token('color.text.lowEmphasis', N70),
+  transition: "color 150ms",
+  '&:hover': {
+    color: token('color.text.mediumEmphasis', N500)
+  }
+}); // react-select overrides (via @atlaskit/select).
 
 var styles = {
   control: function control(style) {
@@ -230,12 +216,11 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         return this.props.parseValue(value, dateValue, timeValue, zoneValue);
       }
 
-      var parsed = parse(value);
-      var valid = isValid(parsed);
-      return valid ? {
-        dateValue: format(parsed, 'YYYY-MM-DD'),
-        timeValue: format(parsed, 'HH:mm'),
-        zoneValue: format(parsed, 'ZZ')
+      var parsed = parseISO(value);
+      return isValid(parsed) ? {
+        dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+        timeValue: format(parsed, convertTokens('HH:mm')),
+        zoneValue: format(parsed, convertTokens('ZZ'))
       } : {
         dateValue: dateValue,
         timeValue: timeValue,
@@ -244,10 +229,10 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "onValueChange",
-    value: function onValueChange(_ref5) {
-      var dateValue = _ref5.dateValue,
-          timeValue = _ref5.timeValue,
-          zoneValue = _ref5.zoneValue;
+    value: function onValueChange(_ref) {
+      var dateValue = _ref.dateValue,
+          timeValue = _ref.timeValue,
+          zoneValue = _ref.zoneValue;
       this.setState({
         dateValue: dateValue,
         timeValue: timeValue,
@@ -322,16 +307,18 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
 
 
       var isClearable = Boolean(dateValue || timeValue);
-      return /*#__PURE__*/React.createElement(Flex, _extends({}, innerProps, {
-        isFocused: isFocused,
-        isDisabled: isDisabled,
-        isInvalid: this.props.isInvalid,
-        appearance: this.props.appearance
-      }), /*#__PURE__*/React.createElement("input", {
+      var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+      return jsx("div", _extends({
+        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
+      }, innerProps, {
+        "data-testid": testId
+      }), jsx("input", {
         name: name,
         type: "hidden",
         value: value
-      }), /*#__PURE__*/React.createElement(DatePickerContainer, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, bothProps, {
+      }), jsx("div", {
+        css: datePickerContainerStyles
+      }, jsx(DatePicker, _extends({}, bothProps, {
         autoFocus: autoFocus,
         dateFormat: dateFormat,
         hideIcon: true,
@@ -341,7 +328,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         value: dateValue,
         locale: locale,
         testId: testId && "".concat(testId, "--datepicker")
-      }, datePickerProps))), /*#__PURE__*/React.createElement(TimePickerContainer, null, /*#__PURE__*/React.createElement(TimePicker, _extends({}, bothProps, {
+      }, datePickerProps))), jsx("div", {
+        css: timePickerContainerStyles
+      }, jsx(TimePicker, _extends({}, bothProps, {
         hideIcon: true,
         onChange: this.onTimeChange,
         selectProps: mergedTimePickerSelectProps,
@@ -351,13 +340,12 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ?
-      /*#__PURE__*/
-      // eslint-disable-next-line styled-components-a11y/click-events-have-key-events,styled-components-a11y/no-static-element-interactions
-      React.createElement(IconContainer, {
+      }, timePickerProps))), isClearable && !isDisabled ? // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container")
-      }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+      }, jsx(SelectClearIcon, {
         size: "small",
         primaryColor: "inherit",
         label: "clear"

package/dist/esm/components/TimePicker.js

@@ -25,11 +25,13 @@ import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { components, CreatableSelect, mergeStyles } from '@atlaskit/select';
 import { B100 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { defaultTimeFormat, defaultTimes, DropdownIndicator, EmptyClearIndicator, placeholderDatetime } from '../internal';
 import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
+import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "10.4.2";
+var packageVersion = "11.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -132,15 +134,14 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       if (_this.props.timeIsEditable) {
         var _this$props = _this.props,
             parseInputValue = _this$props.parseInputValue,
-            _timeFormat = _this$props.timeFormat; // TODO parseInputValue doesn't accept `timeFormat` as an function arg yet...
-
-        var _value = format(parseInputValue(inputValue, _timeFormat || defaultTimeFormat), 'HH:mm') || '';
+            _timeFormat = _this$props.timeFormat;
+        var formattedValue = format(parseInputValue(inputValue, _timeFormat || defaultTimeFormat), 'HH:mm') || '';
 
         _this.setState({
-          value: _value
+          value: formattedValue
         });
 
-        _this.props.onChange(_value);
+        _this.props.onChange(formattedValue);
       } else {
         _this.onChange(inputValue);
       }
@@ -212,7 +213,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function (selectStyles) {
       return !selectStyles.control ? {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "".concat(B100) : "transparent"),
+        border: "2px solid ".concat(_this.getSafeState().isFocused ? token('color.border.focus', B100) : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       } : {};
@@ -241,7 +242,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       }
 
       if (timeFormat) {
-        return format(date, timeFormat);
+        return format(date, convertTokens(timeFormat));
       }
 
       return l10n.formatTime(date);
@@ -336,7 +337,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           return _objectSpread(_objectSpread({}, base), controlStyles);
         },
         menu: function menu(base) {
-          return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {
+          return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
             // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
             // menu width to the width of our container
             width: _this3.containerRef ? _this3.containerRef.getBoundingClientRect().width : 'auto'

package/dist/esm/components/utils.js

@@ -0,0 +1,89 @@
+// https://github.com/date-fns/date-fns-upgrade/blob/master/src/v2/convertTokens/index.ts
+var tokensMap = {
+  // 'D MMMM': '',
+  // 'Do MMMM': '',
+  // 'DD MMMM': '',
+  M: 'L',
+  Mo: 'Mo',
+  MM: 'LL',
+  MMM: 'LLL',
+  MMMM: 'LLLL',
+  Q: 'q',
+  Qo: 'qo',
+  D: 'd',
+  Do: 'do',
+  DD: 'dd',
+  DDD: 'D',
+  DDDo: 'Do',
+  DDDD: 'DDD',
+  d: 'i',
+  do: 'io',
+  dd: 'iiiiii',
+  ddd: 'iii',
+  dddd: 'iiii',
+  A: 'a',
+  a: 'a',
+  aa: 'aaaa',
+  E: 'i',
+  W: 'I',
+  Wo: 'Io',
+  WW: 'II',
+  YY: 'yy',
+  YYYY: 'yyyy',
+  GG: 'RR',
+  GGGG: 'RRRR',
+  H: 'H',
+  HH: 'HH',
+  h: 'h',
+  hh: 'hh',
+  m: 'm',
+  mm: 'mm',
+  s: 's',
+  ss: 'ss',
+  S: 'S',
+  SS: 'SS',
+  SSS: 'SSS',
+  Z: 'xxx',
+  ZZ: 'xx',
+  X: 't',
+  x: 'T'
+};
+var v1tokens = Object.keys(tokensMap).sort().reverse();
+var tokensRegExp = new RegExp('(\\[[^\\[]*\\])|(\\\\)?' + '(' + v1tokens.join('|') + '|.)', 'g');
+export function convertTokens(format) {
+  var tokensCaptures = format.match(tokensRegExp);
+
+  if (tokensCaptures) {
+    return tokensCaptures.reduce(function (acc, tokenString, index) {
+      var v2token = tokensMap[tokenString];
+
+      if (!v2token) {
+        var escapedCaptures = tokenString.match(/^\[(.+)\]$/);
+
+        if (escapedCaptures) {
+          acc.textBuffer.push(escapedCaptures[1]);
+        } else {
+          acc.textBuffer.push(tokenString);
+        }
+      }
+
+      var endOfString = index === tokensCaptures.length - 1;
+
+      if (acc.textBuffer.length && (v2token || endOfString)) {
+        acc.formatBuffer.push("'".concat(acc.textBuffer.join(''), "'"));
+        acc.textBuffer = [];
+      }
+
+      if (v2token) {
+        acc.formatBuffer.push(v2token);
+      }
+
+      return acc;
+    }, {
+      formatBuffer: [],
+      textBuffer: []
+    }).formatBuffer.join('');
+  } else {
+    return format;
+  }
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "10.4.2",
+	"version": "11.1.0",
 	"sideEffects": false
 }