@atlaskit/datetime-picker 10.4.2 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/datetime-picker
 
+## 11.1.0
+
+### Minor Changes
+
+- [`354ef86cca0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354ef86cca0) - Instrumented datetime-picker with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`2b98dfda0a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b98dfda0a6) - Removes `@emotion/styled` in favour of `@emotion/core`.
+- Updated dependencies
+
+## 11.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.1
+
+### Patch Changes
+
+- [`b90c0237824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b90c0237824) - Update package.jsons to remove unused dependencies.
+- Updated dependencies
+
+## 11.0.0
+
+### Major Changes
+
+- [`414b6216adf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/414b6216adf) - [ux] BREAKING CHANGE: Datetime picker now uses date-fns@2.17 (previously <2.0). This change has tightened the requirements of users to provide ISO dates. This was never explicitly supported, but now will cause an error to be thrown for non-ISO dates. For an abundance of caution we're calling this a breaking change to protect users relying on the previous behaviour.
+
+  To upgrade you'll need to ensure any dates passed to the `DateTimePicker` are in ISO format.
+
 ## 10.4.2
 
 ### Patch Changes

package/dist/cjs/components/DatePicker.js

@@ -27,11 +27,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _core = require("@emotion/core");
 
 var _dateFns = require("date-fns");
 
@@ -51,13 +49,13 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
+var _tokens = require("@atlaskit/tokens");
 
 var _internal = require("../internal");
 
 var _FixedLayer = _interopRequireDefault(require("../internal/FixedLayer"));
 
-var _templateObject;
+var _utils = require("./utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -72,7 +70,7 @@ 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; } }
 
 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) {
@@ -84,19 +82,26 @@ function getDateObj(date) {
 }
 
 function getValidDate(iso) {
-  var date = (0, _dateFns.parse)(iso);
+  var date = (0, _dateFns.parseISO)(iso);
   return (0, _dateFns.isValid)(date) ? getDateObj(date) : {};
 }
 
-var StyledMenu = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  z-index: ", ";\n  ", ";\n"])), _colors.N20, (0, _constants.borderRadius)(), _constants.layers.dialog, (0, _elevation.e200)());
+var menuStyles = (0, _core.css)({
+  zIndex: _constants.layers.dialog(),
+  backgroundColor: (0, _tokens.token)('color.background.default', _colors.N20),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A))
+});
 
 var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
       innerProps = _ref.innerProps;
-  return /*#__PURE__*/_react.default.createElement(_FixedLayer.default, {
+  return (0, _core.jsx)(_FixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: /*#__PURE__*/_react.default.createElement(StyledMenu, innerProps, /*#__PURE__*/_react.default.createElement(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+    content: (0, _core.jsx)("div", (0, _extends2.default)({
+      css: menuStyles
+    }, innerProps), (0, _core.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
       disabled: selectProps.calendarDisabled,
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
@@ -139,8 +144,8 @@ var datePickerDefaultProps = {
 
 };
 
-var DatePicker = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(DatePicker, _React$Component);
+var DatePicker = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DatePicker, _Component);
 
   var _super = _createSuper(DatePicker);
 
@@ -246,7 +251,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: (0, _dateFns.format)(parsed, 'YYYY-MM-DD')
+            view: (0, _dateFns.format)(parsed, (0, _utils.convertTokens)('YYYY-MM-DD'))
           });
         }
       }
@@ -332,7 +337,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       var changedState = {
         selectedValue: '',
         value: '',
-        view: _this.props.defaultValue || (0, _dateFns.format)(new Date(), 'YYYY-MM-DD')
+        view: _this.props.defaultValue || (0, _dateFns.format)(new Date(), (0, _utils.convertTokens)('YYYY-MM-DD'))
       };
 
       if (!_this.props.hideIcon) {
@@ -377,7 +382,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function (isOpen) {
       return {
-        border: "2px solid ".concat(isOpen ? _colors.B100 : "transparent"),
+        border: "2px solid ".concat(isOpen ? (0, _tokens.token)('color.border.focus', _colors.B100) : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       };
@@ -408,13 +413,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
       }
 
-      var date = (0, _dateFns.parse)(value);
-
-      if (dateFormat) {
-        return (0, _dateFns.format)(date, dateFormat);
-      }
-
-      return l10n.formatDate(date);
+      var date = (0, _dateFns.parseISO)(value);
+      return dateFormat ? (0, _dateFns.format)(date, (0, _utils.convertTokens)(dateFormat)) : l10n.formatDate(date);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPlaceholder", function () {
       var placeholder = _this.props.placeholder;
@@ -513,26 +513,26 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
-        calendarValue: value && (0, _dateFns.format)((0, _dateFns.parse)(value), 'YYYY-MM-DD'),
+        calendarValue: value && (0, _dateFns.format)((0, _dateFns.parseISO)(value), (0, _utils.convertTokens)('YYYY-MM-DD')),
         calendarView: view,
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay
       };
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, innerProps, {
+      return (0, _core.jsx)("div", (0, _extends2.default)({}, innerProps, {
         role: "presentation",
         onClick: this.onInputClick,
         onInput: this.onSelectInput,
         onKeyDown: this.onSelectKeyDown,
         ref: this.getContainerRef,
         "data-testid": testId && "".concat(testId, "--container")
-      }), /*#__PURE__*/_react.default.createElement("input", {
+      }), (0, _core.jsx)("input", {
         name: name,
         type: "hidden",
         value: value,
         "data-testid": testId && "".concat(testId, "--input")
-      }), /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
+      }), (0, _core.jsx)(_select.default, (0, _extends2.default)({
         enableAnimation: false,
         menuIsOpen: menuIsOpen,
         closeMenuOnSelect: true,
@@ -570,7 +570,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
     }
   }]);
   return DatePicker;
-}(_react.default.Component);
+}(_react.Component);
 
 exports.DatePickerWithoutAnalytics = DatePicker;
 (0, _defineProperty2.default)(DatePicker, "defaultProps", datePickerDefaultProps);

package/dist/cjs/components/DateTimePicker.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,11 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _core = require("@emotion/core");
 
 var _dateFns = require("date-fns");
 
@@ -41,21 +37,19 @@ var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-c
 
 var _select = require("@atlaskit/select");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _internal = require("../internal");
 
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 
 var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utils = require("./utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -66,94 +60,75 @@ 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) { (0, _defineProperty2.default)(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; }
 
 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 = (0, _core.css)({
+  borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400)
+});
+var isFocusedBorderStyles = (0, _core.css)({
+  borderColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+});
+var isFocusedStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.default', _colors.N0)
+});
+var subtleBgStyles = (0, _core.css)({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+});
+var hoverStyles = (0, _core.css)({
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.default', _colors.N30),
+    borderColor: (0, _tokens.token)('color.border.neutral', _colors.N30)
   }
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
+});
+var isInvalidHoverStyles = (0, _core.css)({
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.default', _colors.N0),
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.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 = (0, _core.css)({
+  '&:hover': {
+    cursor: 'default'
   }
-
-  if (isInvalid) {
-    color = colors.N0;
+});
+var baseContainerStyles = (0, _core.css)({
+  display: 'flex',
+  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+  border: "2px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N20)),
+  borderRadius: "".concat((0, _constants.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.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.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.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-basis: 50%;\n  flex-grow: 1;\n  flex-shrink: 0;\n"])));
-
-var TimePickerContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex-basis: 50%;\n  flex-grow: 1;\n"])));
-
+var datePickerContainerStyles = (0, _core.css)({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+var timePickerContainerStyles = (0, _core.css)({
+  flexBasis: '50%',
+  flexGrow: 1
+});
 var ICON_PADDING = 2;
-
-var IconContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.gridSize)(), colors.N70, colors.N500); // react-select overrides (via @atlaskit/select).
-
+var iconContainerStyles = (0, _core.css)({
+  display: 'flex',
+  paddingTop: "6px",
+  paddingRight: "".concat((0, _constants.gridSize)(), "px"),
+  paddingBottom: "6px",
+  paddingLeft: "".concat(ICON_PADDING * 2, "px"),
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70),
+  transition: "color 150ms",
+  '&:hover': {
+    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
+  }
+}); // react-select overrides (via @atlaskit/select).
 
 var styles = {
   control: function control(style) {
@@ -261,12 +236,11 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         return this.props.parseValue(value, dateValue, timeValue, zoneValue);
       }
 
-      var parsed = (0, _dateFns.parse)(value);
-      var valid = (0, _dateFns.isValid)(parsed);
-      return valid ? {
-        dateValue: (0, _dateFns.format)(parsed, 'YYYY-MM-DD'),
-        timeValue: (0, _dateFns.format)(parsed, 'HH:mm'),
-        zoneValue: (0, _dateFns.format)(parsed, 'ZZ')
+      var parsed = (0, _dateFns.parseISO)(value);
+      return (0, _dateFns.isValid)(parsed) ? {
+        dateValue: (0, _dateFns.format)(parsed, (0, _utils.convertTokens)('YYYY-MM-DD')),
+        timeValue: (0, _dateFns.format)(parsed, (0, _utils.convertTokens)('HH:mm')),
+        zoneValue: (0, _dateFns.format)(parsed, (0, _utils.convertTokens)('ZZ'))
       } : {
         dateValue: dateValue,
         timeValue: timeValue,
@@ -275,10 +249,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,
@@ -353,16 +327,18 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
 
 
       var isClearable = Boolean(dateValue || timeValue);
-      return /*#__PURE__*/_react.default.createElement(Flex, (0, _extends2.default)({}, innerProps, {
-        isFocused: isFocused,
-        isDisabled: isDisabled,
-        isInvalid: this.props.isInvalid,
-        appearance: this.props.appearance
-      }), /*#__PURE__*/_react.default.createElement("input", {
+      var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+      return (0, _core.jsx)("div", (0, _extends2.default)({
+        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && subtleBgStyles, isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles)]
+      }, innerProps, {
+        "data-testid": testId
+      }), (0, _core.jsx)("input", {
         name: name,
         type: "hidden",
         value: value
-      }), /*#__PURE__*/_react.default.createElement(DatePickerContainer, null, /*#__PURE__*/_react.default.createElement(_DatePicker.default, (0, _extends2.default)({}, bothProps, {
+      }), (0, _core.jsx)("div", {
+        css: datePickerContainerStyles
+      }, (0, _core.jsx)(_DatePicker.default, (0, _extends2.default)({}, bothProps, {
         autoFocus: autoFocus,
         dateFormat: dateFormat,
         hideIcon: true,
@@ -372,7 +348,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         value: dateValue,
         locale: locale,
         testId: testId && "".concat(testId, "--datepicker")
-      }, datePickerProps))), /*#__PURE__*/_react.default.createElement(TimePickerContainer, null, /*#__PURE__*/_react.default.createElement(_TimePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, datePickerProps))), (0, _core.jsx)("div", {
+        css: timePickerContainerStyles
+      }, (0, _core.jsx)(_TimePicker.default, (0, _extends2.default)({}, bothProps, {
         hideIcon: true,
         onChange: this.onTimeChange,
         selectProps: mergedTimePickerSelectProps,
@@ -382,13 +360,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.default.createElement(IconContainer, {
+      }, timePickerProps))), isClearable && !isDisabled ? // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      (0, _core.jsx)("div", {
+        css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container")
-      }, /*#__PURE__*/_react.default.createElement(_selectClear.default, {
+      }, (0, _core.jsx)(_selectClear.default, {
         size: "small",
         primaryColor: "inherit",
         label: "clear"

package/dist/cjs/components/TimePicker.js

@@ -43,12 +43,16 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _internal = require("../internal");
 
 var _FixedLayer = _interopRequireDefault(require("../internal/FixedLayer"));
 
 var _parseTime = _interopRequireDefault(require("../internal/parseTime"));
 
+var _utils = require("./utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,7 +66,7 @@ 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; } }
 
 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',
@@ -159,15 +163,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 = (0, _dateFns.format)(parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat), 'HH:mm') || '';
+            _timeFormat = _this$props.timeFormat;
+        var formattedValue = (0, _dateFns.format)(parseInputValue(inputValue, _timeFormat || _internal.defaultTimeFormat), 'HH:mm') || '';
 
         _this.setState({
-          value: _value
+          value: formattedValue
         });
 
-        _this.props.onChange(_value);
+        _this.props.onChange(formattedValue);
       } else {
         _this.onChange(inputValue);
       }
@@ -232,7 +235,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function (selectStyles) {
       return !selectStyles.control ? {
-        border: "2px solid ".concat(_this.getSafeState().isFocused ? "".concat(_colors.B100) : "transparent"),
+        border: "2px solid ".concat(_this.getSafeState().isFocused ? (0, _tokens.token)('color.border.focus', _colors.B100) : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       } : {};
@@ -260,7 +263,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       }
 
       if (timeFormat) {
-        return (0, _dateFns.format)(date, timeFormat);
+        return (0, _dateFns.format)(date, (0, _utils.convertTokens)(timeFormat));
       }
 
       return l10n.formatTime(date);
@@ -351,7 +354,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/cjs/components/utils.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertTokens = convertTokens;
+// 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');
+
+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;
+  }
+}