@atlaskit/datetime-picker 13.0.10 → 13.0.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 13.0.12
+
+### Patch Changes
+
+- [#74820](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74820) [`419806ebcae0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/419806ebcae0) - Export internal utility components to new file to clean up.
+
+## 13.0.11
+
+### Patch Changes
+
+- [#74787](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74787) [`c19c3790e6f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c19c3790e6f1) - Cleaning up date picker component by exporting internal utilities.
+
 ## 13.0.10
 
 ### Patch Changes

package/dist/cjs/components/date-picker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DatePickerWithoutAnalytics = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -14,24 +15,20 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
-var _calendar2 = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
-var _layering = require("@atlaskit/layering");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
-var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
+var _menu = require("../internal/menu");
+var _parseDate = require("../internal/parse-date");
+var _parseTokens = require("../internal/parse-tokens");
 var _singleValue = require("../internal/single-value");
-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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -39,53 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; } } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.10";
-function getValidDate(iso) {
-  var date = (0, _dateFns.parseISO)(iso);
-  return (0, _dateFns.isValid)(date) ? {
-    day: date.getDate(),
-    month: date.getMonth() + 1,
-    year: date.getFullYear()
-  } : {};
-}
-function getShortISOString(date) {
-  return (0, _dateFns.format)(date, (0, _utils.convertTokens)('YYYY-MM-DD'));
-}
-var menuStyles = (0, _react2.css)({
-  zIndex: _constants.layers.dialog(),
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-  overflow: 'hidden'
-});
-var Menu = function Menu(_ref) {
-  var selectProps = _ref.selectProps,
-    innerProps = _ref.innerProps;
-  return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
-    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
-  }, (0, _react2.jsx)(_fixedLayer.default, {
-    inputValue: selectProps.inputValue,
-    containerRef: selectProps.calendarContainerRef,
-    content: (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: menuStyles
-    }, innerProps), (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
-      disabled: selectProps.calendarDisabled,
-      disabledDateFilter: selectProps.calendarDisabledDateFilter,
-      minDate: selectProps.calendarMinDate,
-      maxDate: selectProps.calendarMaxDate,
-      nextMonthLabel: selectProps.nextMonthLabel,
-      onChange: selectProps.onCalendarChange,
-      onSelect: selectProps.onCalendarSelect,
-      previousMonthLabel: selectProps.previousMonthLabel,
-      calendarRef: selectProps.calendarRef,
-      selected: [selectProps.calendarValue],
-      locale: selectProps.calendarLocale,
-      testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
-      weekStartDay: selectProps.calendarWeekStartDay
-    }))),
-    testId: selectProps.testId
-  }));
-};
+var packageVersion = "13.0.12";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -96,7 +47,7 @@ var datePickerDefaultProps = {
     return false;
   },
   hideIcon: false,
-  icon: _calendar2.default,
+  icon: _calendar.default,
   id: '',
   innerProps: {},
   isDisabled: false,
@@ -132,8 +83,8 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDateDisabled", function (date) {
       return _this.props.disabled.indexOf(date) > -1;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarChange", function (_ref2) {
-      var iso = _ref2.iso;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarChange", function (_ref) {
+      var iso = _ref.iso;
       var _iso$split = iso.split('-'),
         _iso$split2 = (0, _slicedToArray2.default)(_iso$split, 3),
         year = _iso$split2[0],
@@ -154,8 +105,8 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         calendarValue: newIso
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref3) {
-      var iso = _ref3.iso;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref2) {
+      var iso = _ref2.iso;
       _this.setState({
         selectInputValue: '',
         isOpen: false,
@@ -225,7 +176,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           // We format the parsed date to YYYY-MM-DD here because
           // this is the format expected by the @atlaskit/calendar component
           _this.setState({
-            calendarValue: getShortISOString(parsed)
+            calendarValue: (0, _parseDate.getShortISOString)(parsed)
           });
         }
       }
@@ -233,15 +184,6 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         isOpen: true
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeCalendarValue", function (calendarValue) {
-      // If `calendarValue` has a year that is greater than 9999, default to
-      // today's date
-      var yearIsOverLimit = calendarValue.match(/^\d{5,}/);
-      if (yearIsOverLimit) {
-        return getShortISOString(new Date());
-      }
-      return calendarValue;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
       var _this$containerRef3;
       var _this$getSafeState2 = _this.getSafeState(),
@@ -284,12 +226,10 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           // for more details.
           event.preventDefault();
           if (!_this.isDateDisabled(calendarValue)) {
-            var _this$getSafeState3 = _this.getSafeState(),
-              _value2 = _this$getSafeState3.value;
             // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
-            var safeCalendarValue = _this.getSafeCalendarValue(calendarValue);
-            var valueChanged = safeCalendarValue !== _value2;
+            var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
+            var valueChanged = safeCalendarValue !== value;
             _this.setState({
               selectInputValue: '',
               isOpen: false,
@@ -308,7 +248,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
       var changedState = {
         value: '',
-        calendarValue: _this.props.defaultValue || getShortISOString(new Date())
+        calendarValue: _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date())
       };
       if (!_this.props.hideIcon) {
         changedState = _objectSpread(_objectSpread({}, changedState), {}, {
@@ -359,8 +299,8 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       if (parseInputValue) {
         return parseInputValue(date, dateFormat || _internal.defaultDateFormat);
       }
-      var _this$getSafeState4 = _this.getSafeState(),
-        l10n = _this$getSafeState4.l10n;
+      var _this$getSafeState3 = _this.getSafeState(),
+        l10n = _this$getSafeState3.l10n;
       return l10n.parseDate(date);
     });
     /**
@@ -374,21 +314,21 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       var _this$props2 = _this.props,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         dateFormat = _this$props2.dateFormat;
-      var _this$getSafeState5 = _this.getSafeState(),
-        l10n = _this$getSafeState5.l10n;
+      var _this$getSafeState4 = _this.getSafeState(),
+        l10n = _this$getSafeState4.l10n;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
       }
       var date = (0, _dateFns.parseISO)(value);
-      return dateFormat ? (0, _dateFns.format)(date, (0, _utils.convertTokens)(dateFormat)) : l10n.formatDate(date);
+      return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPlaceholder", function () {
       var placeholder = _this.props.placeholder;
       if (placeholder) {
         return placeholder;
       }
-      var _this$getSafeState6 = _this.getSafeState(),
-        l10n = _this$getSafeState6.l10n;
+      var _this$getSafeState5 = _this.getSafeState(),
+        l10n = _this$getSafeState5.l10n;
       return l10n.formatDate(_internal.placeholderDatetime);
     });
     _this.state = {
@@ -397,7 +337,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       clearingFromIcon: false,
       selectInputValue: _this.props.selectProps.inputValue || '',
       value: _this.props.value || _this.props.defaultValue,
-      calendarValue: _this.props.value || _this.props.defaultValue || getShortISOString(new Date()),
+      calendarValue: _this.props.value || _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date()),
       l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
       locale: _this.props.locale
     };
@@ -427,11 +367,11 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         locale = _this$props3.locale,
         testId = _this$props3.testId,
         weekStartDay = _this$props3.weekStartDay;
-      var _this$getSafeState7 = this.getSafeState(),
-        value = _this$getSafeState7.value,
-        calendarValue = _this$getSafeState7.calendarValue,
-        isOpen = _this$getSafeState7.isOpen,
-        selectInputValue = _this$getSafeState7.selectInputValue;
+      var _this$getSafeState6 = this.getSafeState(),
+        value = _this$getSafeState6.value,
+        calendarValue = _this$getSafeState6.calendarValue,
+        isOpen = _this$getSafeState6.isOpen,
+        selectInputValue = _this$getSafeState6.selectInputValue;
       var actualSelectInputValue;
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.date-picker-input-a11y-fix_cbbxs')) {
         actualSelectInputValue = selectInputValue || (value ? this.formatDate(value) : undefined);
@@ -446,7 +386,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       });
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
-        Menu: Menu,
+        Menu: _menu.Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
@@ -464,7 +404,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
-        calendarValue: value && getShortISOString((0, _dateFns.parseISO)(value)),
+        calendarValue: value && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(value)),
         calendarView: calendarValue,
         onCalendarChange: this.onCalendarChange,
         onCalendarSelect: this.onCalendarSelect,

package/dist/cjs/components/date-time-picker.js

@@ -19,72 +19,19 @@ var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
+var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _parseTokens = require("../internal/parse-tokens");
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
-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); }; }
 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; } }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.10";
-var isInvalidBorderStyles = (0, _react2.css)({
-  borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
-});
-var isFocusedBorderStyles = (0, _react2.css)({
-  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
-});
-var isFocusedStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")
-});
-var subtleBgStyles = (0, _react2.css)({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent'
-});
-var subtleFocusedBgStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-input-pressed, transparent)",
-  borderColor: 'transparent'
-});
-var noBgStyles = (0, _react2.css)({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  '&:hover': {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent'
-  }
-});
-var hoverStyles = (0, _react2.css)({
-  '&:hover': {
-    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-    borderColor: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N30, ")")
-  }
-});
-var isInvalidHoverStyles = (0, _react2.css)({
-  '&:hover': {
-    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),
-    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
-  }
-});
-var isDisabledStyles = (0, _react2.css)({
-  '&:hover': {
-    cursor: 'default'
-  }
-});
-var baseContainerStyles = (0, _react2.css)({
-  display: 'flex',
-  backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
-  border: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(_colors.N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
-  '&:hover': {
-    cursor: 'pointer'
-  }
-});
-
+var packageVersion = "13.0.12";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -219,9 +166,9 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       }
       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: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('YYYY-MM-DD')),
+        timeValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('HH:mm')),
+        zoneValue: (0, _dateFns.format)(parsed, (0, _parseTokens.convertTokens)('ZZ'))
       } : {
         dateValue: dateValue,
         timeValue: timeValue,
@@ -304,12 +251,14 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       // Render DateTimePicker's IconContainer when a value has been filled
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
-      var notFocusedOrIsDisabled = !(isFocused || isDisabled);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
-        css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, bothProps.appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, bothProps.isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (bothProps.isInvalid ? isInvalidHoverStyles : hoverStyles), bothProps.appearance === 'none' && noBgStyles]
-      }, innerProps, {
-        "data-testid": testId
-      }), (0, _react2.jsx)("input", {
+      return (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
+        appearance: bothProps.appearance,
+        isDisabled: isDisabled,
+        isFocused: isFocused,
+        isInvalid: bothProps.isInvalid,
+        testId: testId,
+        innerProps: innerProps
+      }, (0, _react2.jsx)("input", {
         name: name,
         type: "hidden",
         value: value,

package/dist/cjs/components/time-picker.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TimePickerWithoutAnalytics = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -13,8 +15,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _dateFns = require("date-fns");
 var _pick = _interopRequireDefault(require("lodash/pick"));
@@ -23,21 +23,20 @@ var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _constants = require("@atlaskit/theme/constants");
 var _internal = require("../internal");
-var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
+var _fixedLayerMenu = require("../internal/fixed-layer-menu");
 var _parseTime = _interopRequireDefault(require("../internal/parse-time"));
+var _parseTokens = require("../internal/parse-tokens");
 var _singleValue = require("../internal/single-value");
-var _utils = require("./utils");
-var _excluded = ["selectProps"],
-  _excluded2 = ["styles"]; // eslint-disable-next-line no-restricted-imports
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var _excluded = ["styles"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; } }
+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; } } // eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.0.10";
+var packageVersion = "13.0.12";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -46,18 +45,6 @@ var menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
-var FixedLayerMenu = function FixedLayerMenu(_ref) {
-  var selectProps = _ref.selectProps,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_fixedLayer.default, {
-    inputValue: selectProps.inputValue,
-    containerRef: selectProps.fixedLayerRef,
-    content: /*#__PURE__*/_react.default.createElement(_select.components.Menu, (0, _extends2.default)({}, rest, {
-      menuShouldScrollIntoView: false
-    })),
-    testId: selectProps.testId
-  });
-};
 var timePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -236,7 +223,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         isOpen = _this$getSafeState.isOpen;
       var _selectProps$styles = selectProps.styles,
         selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
-        otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded2);
+        otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);
       var SelectComponent = timeIsEditable ? _select.CreatableSelect : _select.default;
 
       /**
@@ -258,7 +245,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
           return time;
         }
         if (timeFormat) {
-          return (0, _dateFns.format)(date, (0, _utils.convertTokens)(timeFormat));
+          return (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(timeFormat));
         }
         return l10n.formatTime(date);
       };
@@ -277,7 +264,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
       });
       var selectComponents = _objectSpread({
         DropdownIndicator: _internal.EmptyComponent,
-        Menu: FixedLayerMenu,
+        Menu: _fixedLayerMenu.FixedLayerMenu,
         SingleValue: SingleValue
       }, hideIcon && {
         ClearIndicator: _internal.EmptyComponent

package/dist/cjs/internal/date-time-picker-container.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimePickerContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var isInvalidBorderStyles = (0, _react.css)({
+  borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
+});
+var isFocusedBorderStyles = (0, _react.css)({
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+});
+var isFocusedStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")
+});
+var subtleBgStyles = (0, _react.css)({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+});
+var subtleFocusedBgStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-input-pressed, transparent)",
+  borderColor: 'transparent'
+});
+var noBgStyles = (0, _react.css)({
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent'
+  }
+});
+var hoverStyles = (0, _react.css)({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+    borderColor: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N30, ")")
+  }
+});
+var isInvalidHoverStyles = (0, _react.css)({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N0, ")"),
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
+  }
+});
+var isDisabledStyles = (0, _react.css)({
+  '&:hover': {
+    cursor: 'default'
+  }
+});
+var baseContainerStyles = (0, _react.css)({
+  display: 'flex',
+  backgroundColor: "var(--ds-background-input, ".concat(_colors.N20, ")"),
+  border: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, ".concat(_colors.N100, ")")) : "2px solid ".concat("var(--ds-border-input, ".concat(_colors.N20, ")")),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
+  '&:hover': {
+    cursor: 'pointer'
+  }
+});
+
+/**
+ * This is the container for the datetime picker component.
+ */
+var DateTimePickerContainer = exports.DateTimePickerContainer = function DateTimePickerContainer(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isFocused = _ref.isFocused,
+    appearance = _ref.appearance,
+    isInvalid = _ref.isInvalid,
+    innerProps = _ref.innerProps,
+    testId = _ref.testId,
+    children = _ref.children;
+  var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: [baseContainerStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
+  }, innerProps, {
+    "data-testid": testId
+  }), children);
+};

package/dist/cjs/internal/fixed-layer-menu.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FixedLayerMenu = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _select = require("@atlaskit/select");
+var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
+var _excluded = ["selectProps"];
+/** @jsx jsx */
+/**
+ * This is the fixed layer menu used in the time picker.
+ */
+var FixedLayerMenu = exports.FixedLayerMenu = function FixedLayerMenu(_ref) {
+  var selectProps = _ref.selectProps,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react.jsx)(_fixedLayer.default, {
+    inputValue: selectProps.inputValue,
+    containerRef: selectProps.fixedLayerRef,
+    content: (0, _react.jsx)(_select.components.Menu, (0, _extends2.default)({}, rest, {
+      menuShouldScrollIntoView: false
+    })),
+    testId: selectProps.testId
+  });
+};

package/dist/cjs/internal/menu.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
+var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
+var _parseDate = require("./parse-date");
+/** @jsx jsx */
+
+var menuStyles = (0, _react.css)({
+  zIndex: _constants.layers.dialog(),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  overflow: 'hidden'
+});
+
+/**
+ * This is the menu used in the select of the date picker.
+ */
+var Menu = exports.Menu = function Menu(_ref) {
+  var selectProps = _ref.selectProps,
+    innerProps = _ref.innerProps;
+  return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
+    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
+  }, (0, _react.jsx)(_fixedLayer.default, {
+    inputValue: selectProps.inputValue,
+    containerRef: selectProps.calendarContainerRef,
+    content: (0, _react.jsx)("div", (0, _extends2.default)({
+      css: menuStyles
+    }, innerProps), (0, _react.jsx)(_calendar.default, (0, _extends2.default)({}, (0, _parseDate.getValidDate)(selectProps.calendarValue), (0, _parseDate.getValidDate)(selectProps.calendarView), {
+      disabled: selectProps.calendarDisabled,
+      disabledDateFilter: selectProps.calendarDisabledDateFilter,
+      minDate: selectProps.calendarMinDate,
+      maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
+      onChange: selectProps.onCalendarChange,
+      onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
+      calendarRef: selectProps.calendarRef,
+      selected: [selectProps.calendarValue],
+      locale: selectProps.calendarLocale,
+      testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
+      weekStartDay: selectProps.calendarWeekStartDay
+    }))),
+    testId: selectProps.testId
+  }));
+};