@atlaskit/datetime-picker 11.0.2 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

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,7 +49,7 @@ 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");
 
@@ -59,8 +57,6 @@ var _FixedLayer = _interopRequireDefault(require("../internal/FixedLayer"));
 
 var _utils = require("./utils");
 
-var _templateObject;
-
 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; }
@@ -74,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 = "11.0.2";
+var packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -90,15 +86,22 @@ function getValidDate(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,
@@ -141,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);
 
@@ -379,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'
       };
@@ -517,19 +520,19 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         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,
@@ -567,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,10 +37,12 @@ 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"));
@@ -53,12 +51,6 @@ var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 
 var _utils = require("./utils");
 
-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; }
-
 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); }; }
 
 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; } }
@@ -68,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 = "11.0.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) {
@@ -276,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,
@@ -354,17 +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,
+      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
-      }), /*#__PURE__*/_react.default.createElement("input", {
+      }), (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,
@@ -374,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,
@@ -384,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,6 +43,8 @@ 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"));
@@ -64,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 = "11.0.2";
+var packageVersion = "11.1.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -233,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'
       } : {};

package/dist/cjs/version.json

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

package/dist/es2019/components/DatePicker.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-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, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
@@ -10,14 +12,14 @@ 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';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "11.0.2";
+const packageVersion = "11.1.0";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -33,20 +35,22 @@ function getValidDate(iso) {
   return isValid(date) ? getDateObj(date) : {};
 }
 
-const StyledMenu = styled.div`
-  background-color: ${N20};
-  border-radius: ${borderRadius()}px;
-  z-index: ${layers.dialog};
-  ${e200()};
-`;
+const menuStyles = css({
+  zIndex: layers.dialog(),
+  backgroundColor: token('color.background.default', N20),
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`)
+});
 
 const Menu = ({
   selectProps,
   innerProps
-}) => /*#__PURE__*/React.createElement(FixedLayer, {
+}) => 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,
@@ -86,7 +90,7 @@ const datePickerDefaultProps = {
 
 };
 
-class DatePicker extends React.Component {
+class DatePicker extends Component {
   constructor(props) {
     super(props);
 
@@ -325,7 +329,7 @@ class DatePicker extends React.Component {
     });
 
     _defineProperty(this, "getSubtleControlStyles", isOpen => ({
-      border: `2px solid ${isOpen ? B100 : `transparent`}`,
+      border: `2px solid ${isOpen ? token('color.border.focus', B100) : `transparent`}`,
       backgroundColor: 'transparent',
       padding: '1px'
     }));
@@ -466,19 +470,19 @@ class DatePicker extends React.Component {
       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 && `${testId}--container`
-    }), /*#__PURE__*/React.createElement("input", {
+    }), jsx("input", {
       name: name,
       type: "hidden",
       value: value,
       "data-testid": testId && `${testId}--input`
-    }), /*#__PURE__*/React.createElement(Select, _extends({
+    }), jsx(Select, _extends({
       enableAnimation: false,
       menuIsOpen: menuIsOpen,
       closeMenuOnSelect: true,