@atlaskit/datetime-picker 13.0.11 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 13.1.0
+
+### Minor Changes
+
+- [#79261](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79261) [`d679c084e0a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d679c084e0a9) - Add optional `label` prop to DatePicker and TimePicker to supply an accessible name via `aria-label`
+
+## 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

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,22 +15,17 @@ 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");
@@ -40,42 +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.11";
-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)({}, (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
-  }));
-};
+var packageVersion = "13.1.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -86,11 +47,12 @@ var datePickerDefaultProps = {
     return false;
   },
   hideIcon: false,
-  icon: _calendar2.default,
+  icon: _calendar.default,
   id: '',
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -122,8 +84,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],
@@ -144,8 +106,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,
@@ -398,6 +360,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         maxDate = _this$props3.maxDate,
         minDate = _this$props3.minDate,
         isInvalid = _this$props3.isInvalid,
+        label = _this$props3.label,
         name = _this$props3.name,
         nextMonthLabel = _this$props3.nextMonthLabel,
         previousMonthLabel = _this$props3.previousMonthLabel,
@@ -425,7 +388,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       });
       var selectComponents = _objectSpread({
         DropdownIndicator: dropDownIcon,
-        Menu: Menu,
+        Menu: _menu.Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
@@ -469,6 +432,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+          "aria-label": label || undefined,
           appearance: this.props.appearance,
           enableAnimation: false,
           menuIsOpen: menuIsOpen,

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

@@ -19,10 +19,10 @@ 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"));
@@ -31,60 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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.11";
-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.1.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -293,23 +240,25 @@ var DateTimePicker = exports.DateTimePickerWithoutAnalytics = /*#__PURE__*/funct
       var _timePickerSelectProp = timePickerSelectProps.styles,
         timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        'aria-label': datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
+        'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, datePickerStyles)
       });
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-        'aria-label': timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
+        'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
         styles: (0, _select.mergeStyles)(styles, timePickerStyles)
       });
 
       // 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 _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.11";
+var packageVersion = "13.1.0";
 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,
@@ -68,6 +55,7 @@ var timePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -218,6 +206,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         id = _this$props2.id,
         innerProps = _this$props2.innerProps,
         isDisabled = _this$props2.isDisabled,
+        label = _this$props2.label,
         locale = _this$props2.locale,
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
@@ -236,7 +225,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;
 
       /**
@@ -277,7 +266,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
@@ -311,6 +300,7 @@ var TimePicker = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_Re
         "data-testid": testId && "".concat(testId, "--input"),
         onKeyDown: this.onSelectKeyDown
       }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+        "aria-label": label || undefined,
         appearance: appearance,
         autoFocus: autoFocus,
         components: selectComponents,

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
+  }));
+};

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

@@ -1,60 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
 import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Calendar from '@atlaskit/calendar';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
-import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
-import FixedLayer from '../internal/fixed-layer';
-import { getSafeCalendarValue, getShortISOString, getValidDate } from '../internal/parse-date';
+import { Menu } from '../internal/menu';
+import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.0.11";
-const menuStyles = css({
-  zIndex: layers.dialog(),
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  overflow: 'hidden'
-});
-const Menu = ({
-  selectProps,
-  innerProps
-}) => jsx(UNSAFE_LAYERING, {
-  isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
-}, jsx(FixedLayer, {
-  inputValue: selectProps.inputValue,
-  containerRef: selectProps.calendarContainerRef,
-  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,
-    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 && `${selectProps.testId}--calendar`,
-    weekStartDay: selectProps.calendarWeekStartDay
-  }))),
-  testId: selectProps.testId
-}));
+const packageVersion = "13.1.0";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -68,6 +30,7 @@ const datePickerDefaultProps = {
   innerProps: {},
   isDisabled: false,
   isInvalid: false,
+  label: '',
   name: '',
   // These disables are here for proper typing when used as defaults. They
   // should *not* use the `noop` function.
@@ -393,6 +356,7 @@ class DatePicker extends Component {
       maxDate,
       minDate,
       isInvalid,
+      label,
       name,
       nextMonthLabel,
       previousMonthLabel,
@@ -468,6 +432,7 @@ class DatePicker extends Component {
         value: value,
         "data-testid": testId && `${testId}--input`
       }), jsx(Select, _extends({
+        "aria-label": label || undefined,
         appearance: this.props.appearance,
         enableAnimation: false,
         menuIsOpen: menuIsOpen,