@atlaskit/datetime-picker 11.0.2 → 11.1.3

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,104 +15,91 @@ 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, 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 { defaultTimes, formatDateTimeZoneIntoIso } from '../internal';
 import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.0.2";
+var packageVersion = "11.1.3";
 /* 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;
+var isInvalidBorderStyles = css({
+  borderColor: "var(--ds-iconBorder-danger, ".concat(R400, ")")
+});
+var isFocusedBorderStyles = css({
+  borderColor: "var(--ds-border-focus, ".concat(B100, ")")
+});
+var isFocusedStyles = css({
+  backgroundColor: "var(--ds-background-default, ".concat(N0, ")")
+});
+var subtleBgStyles = css({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+});
+var hoverStyles = css({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-default, ".concat(N30, ")"),
+    borderColor: "var(--ds-border-neutral, ".concat(N30, ")")
   }
-
-  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 "";
+});
+var isInvalidHoverStyles = css({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-default, ".concat(N0, ")"),
+    borderColor: "var(--ds-iconBorder-danger, ".concat(R400, ")")
   }
-
-  if (isInvalid) {
-    color = colors.R400;
+});
+var isDisabledStyles = css({
+  '&:hover': {
+    cursor: 'default'
   }
-
-  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 baseContainerStyles = css({
+  display: 'flex',
+  backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")"),
+  border: "2px solid ".concat("var(--ds-border-neutral, ".concat(N20, ")")),
+  borderRadius: "".concat(borderRadius(), "px"),
+  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
+  '&:hover': {
+    cursor: 'pointer'
   }
-
-  if (appearance === 'subtle') {
-    color = 'transparent';
-  }
-
-  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 "";
-  }
-
-  if (isInvalid) {
-    color = colors.N0;
-  }
-
-  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: "var(--ds-text-lowEmphasis, ".concat(N70, ")"),
+  transition: "color 150ms",
+  '&:hover': {
+    color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")")
+  }
+}); // react-select overrides (via @atlaskit/select).
 
 var styles = {
   control: function control(style) {
@@ -244,10 +228,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,
@@ -255,9 +239,9 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
       });
 
       if (dateValue && timeValue) {
-        var _value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
+        var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
 
-        var _this$parseValue = this.parseValue(_value, dateValue, timeValue, zoneValue),
+        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
             parsedZone = _this$parseValue.zoneValue;
 
         var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
@@ -322,17 +306,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,
+      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
-      }), /*#__PURE__*/React.createElement("input", {
+      }), 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,
@@ -342,7 +327,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,
@@ -352,13 +339,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

@@ -30,7 +30,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "11.0.2";
+var packageVersion = "11.1.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -212,7 +212,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 ? "var(--ds-border-focus, ".concat(B100, ")") : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       } : {};
@@ -264,8 +264,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(TimePicker, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.props.locale !== nextProps.locale) {
         this.setState({
           l10n: createLocalizationProvider(nextProps.locale)

package/dist/esm/version.json

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

package/dist/types/components/DatePicker.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { CalendarRef } from '@atlaskit/calendar';
 import { LocalizationProvider } from '@atlaskit/locale';
@@ -23,7 +24,7 @@ export interface Props extends WithAnalyticsEventsProps {
     disabled?: string[];
     /**
       A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.
-     
+  
       The function is called with a date string in the format `YYYY-MM-DD` and should return `true` if the date should be disabled.
      */
     disabledDateFilter?: (date: string) => boolean;
@@ -62,7 +63,7 @@ export interface Props extends WithAnalyticsEventsProps {
     selectProps?: SelectProps;
     /**
       The spacing for the select control.
-     
+  
       Compact is `gridSize() * 4`, default is `gridSize * 5`.
      */
     spacing?: Spacing;
@@ -120,7 +121,7 @@ declare const datePickerDefaultProps: {
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
@@ -133,7 +134,7 @@ declare const datePickerDefaultProps: {
     spacing: Spacing;
     locale: string;
 };
-declare class DatePicker extends React.Component<DatePickerProps, State> {
+declare class DatePicker extends Component<DatePickerProps, State> {
     static defaultProps: {
         appearance: Appearance;
         autoFocus: boolean;
@@ -142,15 +143,15 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
         disabled: string[];
         disabledDateFilter: (_: string) => boolean;
         hideIcon: boolean;
-        icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+        icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
         id: string;
         innerProps: {};
         isDisabled: boolean;
         isInvalid: boolean;
         name: string;
-        onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+        onBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
         onChange: (value: string) => void;
-        onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+        onFocus: (event: import("react").FocusEvent<HTMLInputElement>) => void;
         selectProps: {};
         spacing: Spacing;
         locale: string;
@@ -158,7 +159,7 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
     calendarRef: CalendarRef | null;
     containerRef: HTMLElement | null;
     constructor(props: any);
-    componentWillReceiveProps(nextProps: Readonly<DatePickerProps>): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Readonly<DatePickerProps>): void;
     getSafeState: () => {
         inputValue: any;
         isOpen: boolean;
@@ -209,7 +210,7 @@ declare class DatePicker extends React.Component<DatePickerProps, State> {
     render(): JSX.Element;
 }
 export { DatePicker as DatePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay">, "testId" | "placeholder" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay"> & Partial<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay">, "icon" | "disabled" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale">> & Partial<Pick<{
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay">, "testId" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay"> & Partial<Pick<Pick<DatePickerProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay">, "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -217,17 +218,17 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DatePicke
     disabled: string[];
     disabledDateFilter: (_: string) => boolean;
     hideIcon: boolean;
-    icon: React.ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
+    icon: import("react").ComponentType<import("react-select").IndicatorProps<OptionType, false, import("@atlaskit/select").GroupType<OptionType>>>;
     id: string;
     innerProps: {};
     isDisabled: boolean;
     isInvalid: boolean;
     name: string;
-    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (value: string) => void;
-    onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus: (event: import("react").FocusEvent<HTMLInputElement>) => void;
     selectProps: {};
     spacing: Spacing;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "disabledDateFilter" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "weekStartDay" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "icon" | "disabled" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "disabledDateFilter" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "maxDate" | "minDate" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "dateFormat" | "placeholder" | "weekStartDay" | "key" | "analyticsContext"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/DateTimePicker.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { SelectProps } from '@atlaskit/select';
@@ -63,7 +64,7 @@ export interface Props extends WithAnalyticsEventsProps {
     /**
      * The spacing for the select control.
      *
-     * Compact is `gridSize() * 4`, default is `gridSize * 5`.
+     * Compact is `gridSize() * 4`, default is `gridSize() * 5`.
      */
     spacing?: Spacing;
     /** Locale used for formatting dates and times. See [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). */
@@ -154,7 +155,7 @@ declare class DateTimePicker extends React.Component<DateTimePickerProps, State>
     render(): JSX.Element;
 }
 export { DateTimePicker as DateTimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "testId" | "hideIcon" | "value" | "dateFormat" | "timeFormat" | "parseValue"> & Partial<Pick<Pick<DateTimePickerProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue">, "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "times" | "timeIsEditable" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps">> & Partial<Pick<{
     appearance: string;
     autoFocus: boolean;
     isDisabled: boolean;
@@ -174,5 +175,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DateTimeP
     times: string[];
     spacing: string;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "key" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "innerProps" | "autoFocus" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "value" | "dateFormat" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "autoFocus" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "value" | "dateFormat" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat" | "datePickerProps" | "timePickerProps" | "datePickerSelectProps" | "timePickerSelectProps" | "parseValue"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/TimePicker.d.ts

@@ -135,7 +135,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
         isFocused: boolean;
         l10n: LocalizationProvider;
     };
-    componentWillReceiveProps(nextProps: TimePickerProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: TimePickerProps): void;
     getSafeState: () => State;
     getOptions(): Array<Option>;
     onChange: (v: {
@@ -170,7 +170,7 @@ declare class TimePicker extends React.Component<TimePickerProps, State> {
     render(): JSX.Element;
 }
 export { TimePicker as TimePickerWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "times" | "timeIsEditable" | "timeFormat">, "testId" | "placeholder" | "isOpen" | "formatDisplayLabel" | "value" | "timeFormat"> & Partial<Pick<Pick<TimePickerProps, "testId" | "appearance" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "times" | "timeIsEditable" | "timeFormat">, "appearance" | "defaultValue" | "id" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "parseInputValue" | "times" | "timeIsEditable">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePickerProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "times" | "timeIsEditable" | "timeFormat">, "testId" | "isOpen" | "formatDisplayLabel" | "value" | "placeholder" | "timeFormat"> & Partial<Pick<Pick<TimePickerProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "times" | "timeIsEditable" | "timeFormat">, "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "parseInputValue" | "times" | "timeIsEditable">> & Partial<Pick<{
     appearance: Appearance;
     autoFocus: boolean;
     defaultIsOpen: boolean;
@@ -190,5 +190,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TimePicke
     times: string[];
     timeIsEditable: boolean;
     locale: string;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "key" | "defaultValue" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "hideIcon" | "isDisabled" | "isInvalid" | "name" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "selectProps" | "innerProps" | "autoFocus" | "defaultIsOpen" | "defaultValue" | "hideIcon" | "id" | "isDisabled" | "isInvalid" | "name" | "onBlur" | "onChange" | "onFocus" | "spacing" | "locale" | "isOpen" | "parseInputValue" | "formatDisplayLabel" | "value" | "placeholder" | "key" | "analyticsContext" | "times" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/internal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IndicatorProps } from '@atlaskit/select';
 export declare const EmptyClearIndicator: null;
 export declare const placeholderDatetime: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "11.0.2",
+  "version": "11.1.3",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Date time picker"
@@ -31,10 +30,11 @@
     "@atlaskit/popper": "^5.2.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/core": "^10.0.9",
     "date-fns": "^2.17.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "react-scrolllock": "^5.0.1"
   },
   "peerDependencies": {
@@ -45,9 +45,9 @@
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.5",
-    "@atlaskit/field-range": "^9.0.0",
     "@atlaskit/form": "^8.4.0",
-    "@atlaskit/modal-dialog": "^12.0.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/range": "^5.0.11",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.0.0",
@@ -68,6 +68,13 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",