@atlaskit/datetime-picker 19.0.0 → 19.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/datetime-picker
 
+## 19.1.0
+
+### Minor Changes
+
+- [`4da700505d9ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4da700505d9ab) -
+  Add a `calendarLabel` prop for custom calendar accessible labels.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.0.1
+
+### Patch Changes
+
+- [`164b63cff3429`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/164b63cff3429) -
+  [ux] Add input hover, focus, blur, and invalid-state motion to Date Picker, Time Picker, and
+  DateTime Picker input surfaces behind the `platform-dst-motion-uplift-input` feature gate. Behind
+  the same gate, the focused DateTime Picker date or time input shows a 2px focus ring that covers
+  the outer border and rounds its outer corners, and the invalid state matches the other pickers.
+- Updated dependencies
+
 ## 19.0.0
 
 ### Major Changes

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

@@ -38,7 +38,7 @@ var _menu = require("../internal/menu");
 var _menuTopLayer = require("../internal/menu-top-layer");
 var _parseDate = require("../internal/parse-date");
 var _singleValue = require("../internal/single-value");
-var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "calendarLabel", "placeholder", "nextMonthLabel", "previousMonthLabel"],
   _excluded2 = ["MenuPortal"],
   _excluded3 = ["menuRenderMode"]; /// <reference types="node" />
 // for typing `process`
@@ -47,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -139,6 +139,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     formatDisplayLabel = props.formatDisplayLabel,
     testId = props.testId,
     ariaDescribedBy = props['aria-describedby'],
+    calendarLabel = props.calendarLabel,
     placeholder = props.placeholder,
     nextMonthLabel = props.nextMonthLabel,
     previousMonthLabel = props.previousMonthLabel,
@@ -531,6 +532,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
   } : {};
   var calendarProps = {
     calendarContainerRef: containerRef.current,
+    calendarLabel: calendarLabel,
     calendarDisabled: disabled,
     calendarDisabledDateFilter: disabledDateFilter,
     calendarMaxDate: maxDate,
@@ -549,9 +551,13 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
      */
     menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
+  var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
   var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
     control: function control(base) {
-      return _objectSpread(_objectSpread({}, base), disabledStyle);
+      var _base$transition;
+      return _objectSpread(_objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
+        transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {}), disabledStyle);
     },
     indicatorsContainer: function indicatorsContainer(base) {
       return _objectSpread(_objectSpread({}, base), {}, {
@@ -654,6 +660,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     // These aren't part of `Select`'s API, but we're using them here.
     ,
     calendarContainerRef: calendarProps.calendarContainerRef,
+    calendarLabel: calendarProps.calendarLabel,
     calendarDisabled: calendarProps.calendarDisabled,
     calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
     calendarLocale: calendarProps.calendarLocale,

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

@@ -18,6 +18,7 @@ var _dateFns = require("date-fns");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _styles = require("@atlaskit/react-select/styles");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
@@ -33,7 +34,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -44,21 +45,42 @@ var compiledStyles = {
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
   iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
 };
+var innerCornerRadius = "calc(".concat("var(--ds-radius-medium, 6px)", " - ", "var(--ds-border-width, 1px)", ")");
+var cornerRadiusStyles = {
+  start: {
+    borderStartStartRadius: innerCornerRadius,
+    borderEndStartRadius: innerCornerRadius
+  },
+  end: {
+    borderStartEndRadius: innerCornerRadius,
+    borderEndEndRadius: innerCornerRadius
+  },
+  none: {}
+};
 
 // react-select overrides (via @atlaskit/select).
-var styles = {
-  control: function control(style) {
-    return _objectSpread(_objectSpread({}, style), {}, {
-      backgroundColor: 'transparent',
-      border: 2,
-      borderRadius: 0,
-      paddingLeft: 0,
-      ':hover': {
+var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
+  return {
+    control: function control(style, _ref) {
+      var isDisabled = _ref.isDisabled,
+        isFocused = _ref.isFocused;
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), isInputMotionEnabled && !isDisabled ? {
+        transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {}), {}, {
         backgroundColor: 'transparent',
-        cursor: 'inherit'
-      }
-    });
-  }
+        border: 2,
+        borderRadius: 0
+      }, isInputMotionEnabled ? _objectSpread(_objectSpread({}, cornerRadiusStyles[roundedCorners]), {}, {
+        boxShadow: isFocused ? "0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)", ", inset 0 0 0 ", "var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)") : 'none'
+      }) : {}), {}, {
+        paddingLeft: 0,
+        ':hover': {
+          backgroundColor: 'transparent',
+          cursor: 'inherit'
+        }
+      });
+    }
+  };
 };
 
 /**
@@ -85,49 +107,50 @@ var timePickerDefaultAriaLabel = exports.timePickerDefaultAriaLabel = 'Time';
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var ariaDescribedBy = _ref['aria-describedby'],
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    _ref$clearControlLabe = _ref.clearControlLabel,
-    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
-    _ref$datePickerProps = _ref.datePickerProps,
-    datePickerPropsWithSelectProps = _ref$datePickerProps === void 0 ? {} : _ref$datePickerProps,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    _ref$innerProps = _ref.innerProps,
-    innerProps = _ref$innerProps === void 0 ? {} : _ref$innerProps,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isInvalid = _ref.isInvalid,
-    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-    _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? '' : _ref$name,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? function (_event) {} : _ref$onBlur,
-    _ref$onChange = _ref.onChange,
-    onChangeProp = _ref$onChange === void 0 ? function (_value) {} : _ref$onChange,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? function (_event) {} : _ref$onFocus,
-    providedParseValue = _ref.parseValue,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
-    _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
-    testId = _ref.testId,
-    _ref$timePickerProps = _ref.timePickerProps,
-    timePickerPropsWithSelectProps = _ref$timePickerProps === void 0 ? {} : _ref$timePickerProps,
-    providedValue = _ref.value;
+var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var ariaDescribedBy = _ref2['aria-describedby'],
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    _ref2$autoFocus = _ref2.autoFocus,
+    autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+    _ref2$clearControlLab = _ref2.clearControlLabel,
+    clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
+    _ref2$datePickerProps = _ref2.datePickerProps,
+    datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
+    _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? '' : _ref2$id,
+    _ref2$innerProps = _ref2.innerProps,
+    innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$isInvalid = _ref2.isInvalid,
+    isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
+    _ref2$isRequired = _ref2.isRequired,
+    isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
+    _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? '' : _ref2$name,
+    _ref2$onBlur = _ref2.onBlur,
+    onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
+    _ref2$onChange = _ref2.onChange,
+    onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
+    _ref2$onFocus = _ref2.onFocus,
+    onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
+    providedParseValue = _ref2.parseValue,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+    _ref2$locale = _ref2.locale,
+    locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
+    testId = _ref2.testId,
+    _ref2$timePickerProps = _ref2.timePickerProps,
+    timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
+    providedValue = _ref2.value;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
+  var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -181,8 +204,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   var _useReducer = (0, _react.useReducer)(reducer, null, function () {
-      var _ref2;
-      var initialValue = (_ref2 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : '';
+      var _ref3;
+      var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
       var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
       var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
       if (!initialValue) {
@@ -344,10 +367,10 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'selectedDate',
     actionSubject: 'dateTimePicker'
   }, analyticsAttributes));
-  var onValueChange = function onValueChange(_ref3) {
-    var providedDateValue = _ref3.providedDateValue,
-      providedTimeValue = _ref3.providedTimeValue,
-      providedZoneValue = _ref3.providedZoneValue;
+  var onValueChange = function onValueChange(_ref4) {
+    var providedDateValue = _ref4.providedDateValue,
+      providedTimeValue = _ref4.providedTimeValue,
+      providedZoneValue = _ref4.providedZoneValue;
     if (providedDateValue && providedTimeValue) {
       var isoValue = (0, _formatDateTimeZoneIntoIso.formatDateTimeZoneIntoIso)(providedDateValue, providedTimeValue, providedZoneValue);
       var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
@@ -387,24 +410,31 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       });
     }
   };
+
+  // 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(dtState.dateValue || dtState.timeValue);
+  var hasClearButton = isClearable && !isDisabled;
+  var dateStyles = (0, _react.useMemo)(function () {
+    return getStyles(isInputMotionEnabled, 'start');
+  }, [isInputMotionEnabled]);
+  var timeStyles = (0, _react.useMemo)(function () {
+    return getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end');
+  }, [isInputMotionEnabled, hasClearButton]);
   var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
     datePickerProps = (0, _objectWithoutProperties2.default)(datePickerPropsWithSelectProps, _excluded);
   var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
   var datePickerLabel = datePickerProps.label || 'Date';
   var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-    styles: (0, _styles.mergeStyles)(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+    styles: (0, _styles.mergeStyles)(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
   });
   var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
     timePickerProps = (0, _objectWithoutProperties2.default)(timePickerPropsWithSelectProps, _excluded2);
   var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
   var timePickerLabel = timePickerProps.label || 'Time';
   var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-    styles: (0, _styles.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+    styles: (0, _styles.mergeStyles)(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
   });
-
-  // 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(dtState.dateValue || dtState.timeValue);
   return /*#__PURE__*/_react.default.createElement(_dateTimePickerContainer.DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
@@ -424,6 +454,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
+    calendarLabel: datePickerProps.calendarLabel,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
     defaultValue: datePickerProps.defaultValue,
@@ -490,7 +521,7 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: dtState.timeValue
-  })), isClearable && !isDisabled ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+  })), hasClearButton ? /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     xcss: compiledStyles.iconContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -291,9 +291,13 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, _ref) {
     ClearIndicator: _emptyComponent.EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
+  var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
   var mergedStyles = (0, _styles.mergeStyles)(selectStyles, {
     control: function control(base) {
-      return _objectSpread({}, base);
+      var _base$transition;
+      return _objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
+        transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {});
     },
     menu: function menu(base) {
       return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {

package/dist/cjs/internal/date-time-picker-container.compiled.css

@@ -1,10 +1,12 @@
 ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
+._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
+._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
 ._1e0c1txw{display:flex}
 ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}

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

@@ -12,8 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var isInvalidBorderStyles = null;
+var isInvalidBorderWithShadowStyles = null;
 var isFocusedBorderStyles = null;
 var isFocusedStyles = null;
 var subtleBgStyles = null;
@@ -24,6 +26,10 @@ var isInvalidHoverStyles = null;
 var isDisabledStyles = null;
 var newBorderStyles = null;
 var baseContainerStyles = null;
+var inputMotionStyles = {
+  legacy: "_v564r5cv",
+  base: "_v56497ke"
+};
 /**
  * This is the container for the datetime picker component.
  */
@@ -36,11 +42,12 @@ var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0,
     innerProps = _ref.innerProps,
     testId = _ref.testId;
   var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+  var isInputMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-input');
 
   // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: (0, _runtime.ax)(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: (0, _runtime.ax)(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

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

@@ -64,6 +64,7 @@ var MenuTopLayer = exports.MenuTopLayer = function MenuTopLayer(_ref) {
     role: "presentation",
     className: (0, _runtime.ax)([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
+    label: selectProps.calendarLabel,
     day: day,
     month: month,
     year: year,

package/dist/cjs/internal/menu.js

@@ -64,6 +64,7 @@ var Menu = exports.Menu = function Menu(_ref) {
       onMouseDown: onMenuMouseDown,
       className: (0, _runtime.ax)(["_2rko1mok _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs130s"])
     }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(_calendar.default, {
+      label: selectProps.calendarLabel,
       day: day,
       month: month,
       year: year,

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

@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.4";
+const packageVersion = "19.0.1";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -101,6 +101,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     formatDisplayLabel,
     testId,
     'aria-describedby': ariaDescribedBy,
+    calendarLabel,
     placeholder,
     nextMonthLabel,
     previousMonthLabel,
@@ -458,6 +459,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   } : {};
   const calendarProps = {
     calendarContainerRef: containerRef.current,
+    calendarLabel,
     calendarDisabled: disabled,
     calendarDisabledDateFilter: disabledDateFilter,
     calendarMaxDate: maxDate,
@@ -476,11 +478,18 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
      */
     menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
+  const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   const mergedStyles = mergeStyles(selectStyles, {
-    control: base => ({
-      ...base,
-      ...disabledStyle
-    }),
+    control: base => {
+      var _base$transition;
+      return {
+        ...base,
+        ...(isInputMotionEnabled && !isDisabled ? {
+          transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+        } : {}),
+        ...disabledStyle
+      };
+    },
     indicatorsContainer: base => ({
       ...base,
       paddingLeft: "var(--ds-space-025, 2px)",
@@ -581,6 +590,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     // These aren't part of `Select`'s API, but we're using them here.
     ,
     calendarContainerRef: calendarProps.calendarContainerRef,
+    calendarLabel: calendarProps.calendarLabel,
     calendarDisabled: calendarProps.calendarDisabled,
     calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
     calendarLocale: calendarProps.calendarLocale,

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

@@ -5,13 +5,14 @@ import { ax, ix } from "@compiled/react/runtime";
 /// <reference types="node" />
 // for typing `process`
 
-import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import IconButton from '@atlaskit/button/icon/button';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/react-select/styles';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
@@ -20,7 +21,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.4";
+const packageVersion = "19.0.1";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -31,21 +32,43 @@ const compiledStyles = {
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
   iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
 };
+const innerCornerRadius = `calc(${"var(--ds-radius-medium, 6px)"} - ${"var(--ds-border-width, 1px)"})`;
+const cornerRadiusStyles = {
+  start: {
+    borderStartStartRadius: innerCornerRadius,
+    borderEndStartRadius: innerCornerRadius
+  },
+  end: {
+    borderStartEndRadius: innerCornerRadius,
+    borderEndEndRadius: innerCornerRadius
+  },
+  none: {}
+};
 
 // react-select overrides (via @atlaskit/select).
-const styles = {
-  control: style => ({
+const getStyles = (isInputMotionEnabled, roundedCorners) => ({
+  control: (style, {
+    isDisabled,
+    isFocused
+  }) => ({
     ...style,
+    ...(isInputMotionEnabled && !isDisabled ? {
+      transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+    } : {}),
     backgroundColor: 'transparent',
     border: 2,
     borderRadius: 0,
+    ...(isInputMotionEnabled ? {
+      ...cornerRadiusStyles[roundedCorners],
+      boxShadow: isFocused ? `0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-focused, #4688EC)"}, inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${"var(--ds-border-focused, #4688EC)"}` : 'none'
+    } : {}),
     paddingLeft: 0,
     ':hover': {
       backgroundColor: 'transparent',
       cursor: 'inherit'
     }
   })
-};
+});
 
 /**
  * Two action types keep the reducer focused:
@@ -99,6 +122,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   value: providedValue
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
+  const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -360,6 +384,13 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
       });
     }
   };
+
+  // Render DateTimePicker's IconContainer when a value has been filled
+  // Don't use Date or TimePicker's because they can't be customised
+  const isClearable = Boolean(dtState.dateValue || dtState.timeValue);
+  const hasClearButton = isClearable && !isDisabled;
+  const dateStyles = useMemo(() => getStyles(isInputMotionEnabled, 'start'), [isInputMotionEnabled]);
+  const timeStyles = useMemo(() => getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end'), [isInputMotionEnabled, hasClearButton]);
   const {
     selectProps: datePickerSelectProps,
     ...datePickerProps
@@ -368,7 +399,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   const datePickerLabel = datePickerProps.label || 'Date';
   const mergedDatePickerSelectProps = {
     ...datePickerSelectProps,
-    styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+    styles: mergeStyles(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
   };
   const {
     selectProps: timePickerSelectProps,
@@ -378,12 +409,8 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
   const timePickerLabel = timePickerProps.label || 'Time';
   const mergedTimePickerSelectProps = {
     ...timePickerSelectProps,
-    styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+    styles: mergeStyles(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
   };
-
-  // Render DateTimePicker's IconContainer when a value has been filled
-  // Don't use Date or TimePicker's because they can't be customised
-  const isClearable = Boolean(dtState.dateValue || dtState.timeValue);
   return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
@@ -403,6 +430,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
+    calendarLabel: datePickerProps.calendarLabel,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
     defaultValue: datePickerProps.defaultValue,
@@ -469,7 +497,7 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: dtState.timeValue
-  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+  })), hasClearButton ? /*#__PURE__*/React.createElement(Inline, {
     xcss: compiledStyles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",

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

@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.7.4";
+const packageVersion = "19.0.1";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -241,10 +241,17 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     })
   };
   const renderIconContainer = Boolean(!hideIcon && value);
+  const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   const mergedStyles = mergeStyles(selectStyles, {
-    control: base => ({
-      ...base
-    }),
+    control: base => {
+      var _base$transition;
+      return {
+        ...base,
+        ...(isInputMotionEnabled && !isDisabled ? {
+          transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+        } : {})
+      };
+    },
     menu: base => ({
       ...base,
       ...menuStyles,

package/dist/es2019/internal/date-time-picker-container.compiled.css

@@ -1,10 +1,12 @@
 ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
+._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
+._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
 ._1e0c1txw{display:flex}
 ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}

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

@@ -4,7 +4,9 @@ import "./date-time-picker-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 const isInvalidBorderStyles = null;
+const isInvalidBorderWithShadowStyles = null;
 const isFocusedBorderStyles = null;
 const isFocusedStyles = null;
 const subtleBgStyles = null;
@@ -15,6 +17,10 @@ const isInvalidHoverStyles = null;
 const isDisabledStyles = null;
 const newBorderStyles = null;
 const baseContainerStyles = null;
+const inputMotionStyles = {
+  legacy: "_v564r5cv",
+  base: "_v56497ke"
+};
 /**
  * This is the container for the datetime picker component.
  */
@@ -28,11 +34,12 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
   const notFocusedOrIsDisabled = !(isFocused || isDisabled);
+  const isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
 
   // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: ax(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: ax(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/es2019/internal/menu-top-layer.js

@@ -59,6 +59,7 @@ export const MenuTopLayer = ({
     role: "presentation",
     className: ax([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+    label: selectProps.calendarLabel,
     day: day,
     month: month,
     year: year,

package/dist/es2019/internal/menu.js

@@ -61,6 +61,7 @@ export const Menu = ({
       onMouseDown: onMenuMouseDown,
       className: ax(["_2rko1mok _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs130s"])
     }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+      label: selectProps.calendarLabel,
       day: day,
       month: month,
       year: year,

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"],
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "calendarLabel", "placeholder", "nextMonthLabel", "previousMonthLabel"],
   _excluded2 = ["MenuPortal"],
   _excluded3 = ["menuRenderMode"];
 import "./date-picker.compiled.css";
@@ -40,7 +40,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -132,6 +132,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     formatDisplayLabel = props.formatDisplayLabel,
     testId = props.testId,
     ariaDescribedBy = props['aria-describedby'],
+    calendarLabel = props.calendarLabel,
     placeholder = props.placeholder,
     nextMonthLabel = props.nextMonthLabel,
     previousMonthLabel = props.previousMonthLabel,
@@ -524,6 +525,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
   } : {};
   var calendarProps = {
     calendarContainerRef: containerRef.current,
+    calendarLabel: calendarLabel,
     calendarDisabled: disabled,
     calendarDisabledDateFilter: disabledDateFilter,
     calendarMaxDate: maxDate,
@@ -542,9 +544,13 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
      */
     menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
   };
+  var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
-      return _objectSpread(_objectSpread({}, base), disabledStyle);
+      var _base$transition;
+      return _objectSpread(_objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
+        transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {}), disabledStyle);
     },
     indicatorsContainer: function indicatorsContainer(base) {
       return _objectSpread(_objectSpread({}, base), {}, {
@@ -647,6 +653,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     // These aren't part of `Select`'s API, but we're using them here.
     ,
     calendarContainerRef: calendarProps.calendarContainerRef,
+    calendarLabel: calendarProps.calendarLabel,
     calendarDisabled: calendarProps.calendarDisabled,
     calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
     calendarLocale: calendarProps.calendarLocale,

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

@@ -12,13 +12,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /// <reference types="node" />
 // for typing `process`
 
-import React, { forwardRef, useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 import { format, isValid, parseISO } from 'date-fns';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import IconButton from '@atlaskit/button/icon/button';
 import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { mergeStyles } from '@atlaskit/react-select/styles';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
@@ -27,7 +28,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -38,21 +39,42 @@ var compiledStyles = {
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
   iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
 };
+var innerCornerRadius = "calc(".concat("var(--ds-radius-medium, 6px)", " - ", "var(--ds-border-width, 1px)", ")");
+var cornerRadiusStyles = {
+  start: {
+    borderStartStartRadius: innerCornerRadius,
+    borderEndStartRadius: innerCornerRadius
+  },
+  end: {
+    borderStartEndRadius: innerCornerRadius,
+    borderEndEndRadius: innerCornerRadius
+  },
+  none: {}
+};
 
 // react-select overrides (via @atlaskit/select).
-var styles = {
-  control: function control(style) {
-    return _objectSpread(_objectSpread({}, style), {}, {
-      backgroundColor: 'transparent',
-      border: 2,
-      borderRadius: 0,
-      paddingLeft: 0,
-      ':hover': {
+var getStyles = function getStyles(isInputMotionEnabled, roundedCorners) {
+  return {
+    control: function control(style, _ref) {
+      var isDisabled = _ref.isDisabled,
+        isFocused = _ref.isFocused;
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), isInputMotionEnabled && !isDisabled ? {
+        transition: "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {}), {}, {
         backgroundColor: 'transparent',
-        cursor: 'inherit'
-      }
-    });
-  }
+        border: 2,
+        borderRadius: 0
+      }, isInputMotionEnabled ? _objectSpread(_objectSpread({}, cornerRadiusStyles[roundedCorners]), {}, {
+        boxShadow: isFocused ? "0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)", ", inset 0 0 0 ", "var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, #4688EC)") : 'none'
+      }) : {}), {}, {
+        paddingLeft: 0,
+        ':hover': {
+          backgroundColor: 'transparent',
+          cursor: 'inherit'
+        }
+      });
+    }
+  };
 };
 
 /**
@@ -79,49 +101,50 @@ export var timePickerDefaultAriaLabel = 'Time';
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var ariaDescribedBy = _ref['aria-describedby'],
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    _ref$clearControlLabe = _ref.clearControlLabel,
-    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
-    _ref$datePickerProps = _ref.datePickerProps,
-    datePickerPropsWithSelectProps = _ref$datePickerProps === void 0 ? {} : _ref$datePickerProps,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    _ref$innerProps = _ref.innerProps,
-    innerProps = _ref$innerProps === void 0 ? {} : _ref$innerProps,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isInvalid = _ref.isInvalid,
-    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
-    _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? '' : _ref$name,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? function (_event) {} : _ref$onBlur,
-    _ref$onChange = _ref.onChange,
-    onChangeProp = _ref$onChange === void 0 ? function (_value) {} : _ref$onChange,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? function (_event) {} : _ref$onFocus,
-    providedParseValue = _ref.parseValue,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
-    _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
-    testId = _ref.testId,
-    _ref$timePickerProps = _ref.timePickerProps,
-    timePickerPropsWithSelectProps = _ref$timePickerProps === void 0 ? {} : _ref$timePickerProps,
-    providedValue = _ref.value;
+var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var ariaDescribedBy = _ref2['aria-describedby'],
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    _ref2$autoFocus = _ref2.autoFocus,
+    autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+    _ref2$clearControlLab = _ref2.clearControlLabel,
+    clearControlLabel = _ref2$clearControlLab === void 0 ? 'clear' : _ref2$clearControlLab,
+    _ref2$datePickerProps = _ref2.datePickerProps,
+    datePickerPropsWithSelectProps = _ref2$datePickerProps === void 0 ? {} : _ref2$datePickerProps,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
+    _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? '' : _ref2$id,
+    _ref2$innerProps = _ref2.innerProps,
+    innerProps = _ref2$innerProps === void 0 ? {} : _ref2$innerProps,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$isInvalid = _ref2.isInvalid,
+    isInvalid = _ref2$isInvalid === void 0 ? false : _ref2$isInvalid,
+    _ref2$isRequired = _ref2.isRequired,
+    isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
+    _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? '' : _ref2$name,
+    _ref2$onBlur = _ref2.onBlur,
+    onBlur = _ref2$onBlur === void 0 ? function (_event) {} : _ref2$onBlur,
+    _ref2$onChange = _ref2.onChange,
+    onChangeProp = _ref2$onChange === void 0 ? function (_value) {} : _ref2$onChange,
+    _ref2$onFocus = _ref2.onFocus,
+    onFocus = _ref2$onFocus === void 0 ? function (_event) {} : _ref2$onFocus,
+    providedParseValue = _ref2.parseValue,
+    _ref2$spacing = _ref2.spacing,
+    spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
+    _ref2$locale = _ref2.locale,
+    locale = _ref2$locale === void 0 ? 'en-US' : _ref2$locale,
+    testId = _ref2.testId,
+    _ref2$timePickerProps = _ref2.timePickerProps,
+    timePickerPropsWithSelectProps = _ref2$timePickerProps === void 0 ? {} : _ref2$timePickerProps,
+    providedValue = _ref2.value;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
     setIsFocused = _useState2[1];
+  var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
 
   /**
    * Defined inside the component so the reducer closes over `providedParseValue`
@@ -175,8 +198,8 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var _useReducer = useReducer(reducer, null, function () {
-      var _ref2;
-      var initialValue = (_ref2 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : '';
+      var _ref3;
+      var initialValue = (_ref3 = providedValue !== null && providedValue !== void 0 ? providedValue : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
       var initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
       var initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
       if (!initialValue) {
@@ -338,10 +361,10 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'selectedDate',
     actionSubject: 'dateTimePicker'
   }, analyticsAttributes));
-  var onValueChange = function onValueChange(_ref3) {
-    var providedDateValue = _ref3.providedDateValue,
-      providedTimeValue = _ref3.providedTimeValue,
-      providedZoneValue = _ref3.providedZoneValue;
+  var onValueChange = function onValueChange(_ref4) {
+    var providedDateValue = _ref4.providedDateValue,
+      providedTimeValue = _ref4.providedTimeValue,
+      providedZoneValue = _ref4.providedZoneValue;
     if (providedDateValue && providedTimeValue) {
       var isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
       var _parseValue = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue),
@@ -381,24 +404,31 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
     }
   };
+
+  // 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(dtState.dateValue || dtState.timeValue);
+  var hasClearButton = isClearable && !isDisabled;
+  var dateStyles = useMemo(function () {
+    return getStyles(isInputMotionEnabled, 'start');
+  }, [isInputMotionEnabled]);
+  var timeStyles = useMemo(function () {
+    return getStyles(isInputMotionEnabled, hasClearButton ? 'none' : 'end');
+  }, [isInputMotionEnabled, hasClearButton]);
   var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
     datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
   var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
   var datePickerLabel = datePickerProps.label || 'Date';
   var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-    styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+    styles: mergeStyles(dateStyles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
   });
   var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
     timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
   var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
   var timePickerLabel = timePickerProps.label || 'Time';
   var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-    styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+    styles: mergeStyles(timeStyles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
   });
-
-  // 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(dtState.dateValue || dtState.timeValue);
   return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
     appearance: appearance,
     isDisabled: isDisabled,
@@ -418,6 +448,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     appearance: appearance,
     "aria-describedby": datePickerAriaDescribedBy,
     autoFocus: datePickerProps.autoFocus || autoFocus,
+    calendarLabel: datePickerProps.calendarLabel,
     dateFormat: datePickerProps.dateFormat,
     defaultIsOpen: datePickerProps.defaultIsOpen,
     defaultValue: datePickerProps.defaultValue,
@@ -484,7 +515,7 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     timeIsEditable: timePickerProps.timeIsEditable,
     times: timePickerProps.times,
     value: dtState.timeValue
-  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+  })), hasClearButton ? /*#__PURE__*/React.createElement(Inline, {
     xcss: compiledStyles.iconContainerStyles
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",

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

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.7.4";
+var packageVersion = "19.0.1";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
@@ -284,9 +284,13 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     ClearIndicator: EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
+  var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
   var mergedStyles = mergeStyles(selectStyles, {
     control: function control(base) {
-      return _objectSpread({}, base);
+      var _base$transition;
+      return _objectSpread(_objectSpread({}, base), isInputMotionEnabled && !isDisabled ? {
+        transition: (_base$transition = base.transition) !== null && _base$transition !== void 0 ? _base$transition : "var(--ds-input, background-color border-color box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1))"
+      } : {});
     },
     menu: function menu(base) {
       return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {

package/dist/esm/internal/date-time-picker-container.compiled.css

@@ -1,10 +1,12 @@
 ._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._v56497ke{transition:var(--ds-input,background-color border-color box-shadow .15s cubic-bezier(.4,1,.6,1))}
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
+._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
+._16qsvyy1{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
 ._1e0c1txw{display:flex}
 ._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}

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

@@ -4,7 +4,9 @@ import "./date-time-picker-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 var isInvalidBorderStyles = null;
+var isInvalidBorderWithShadowStyles = null;
 var isFocusedBorderStyles = null;
 var isFocusedStyles = null;
 var subtleBgStyles = null;
@@ -15,6 +17,10 @@ var isInvalidHoverStyles = null;
 var isDisabledStyles = null;
 var newBorderStyles = null;
 var baseContainerStyles = null;
+var inputMotionStyles = {
+  legacy: "_v564r5cv",
+  base: "_v56497ke"
+};
 /**
  * This is the container for the datetime picker component.
  */
@@ -27,11 +33,12 @@ export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref
     innerProps = _ref.innerProps,
     testId = _ref.testId;
   var notFocusedOrIsDisabled = !(isFocused || isDisabled);
+  var isInputMotionEnabled = fg('platform-dst-motion-uplift-input');
 
   // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: ax(["_2rko1qi0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: ax(["_2rko1qi0 _1e0c1txw _bfhk1j9a _d0altlke", !isInputMotionEnabled && inputMotionStyles.legacy, isInputMotionEnabled && !isDisabled && inputMotionStyles.base, "_19itno8c", isDisabled && "_1h6dbk0g _bfhk187o _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", !isInputMotionEnabled && isInvalid && "_1h6d1bqt", isInputMotionEnabled && isInvalid && "_1h6d1bqt _16qsizbr", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/esm/internal/menu-top-layer.js

@@ -55,6 +55,7 @@ export var MenuTopLayer = function MenuTopLayer(_ref) {
     role: "presentation",
     className: ax([styles.root])
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+    label: selectProps.calendarLabel,
     day: day,
     month: month,
     year: year,

package/dist/esm/internal/menu.js

@@ -57,6 +57,7 @@ export var Menu = function Menu(_ref) {
       onMouseDown: onMenuMouseDown,
       className: ax(["_2rko1mok _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs130s"])
     }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
+      label: selectProps.calendarLabel,
       day: day,
       month: month,
       year: year,

package/dist/types/types.d.ts

@@ -47,6 +47,12 @@ interface PickerSelectProps {
     selectProps?: DateTimePickerSelectProps;
 }
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps, PickerSelectProps {
+    /**
+     * The aria-label attribute associated with the calendar.
+     *
+     * @default 'calendar'
+     */
+    calendarLabel?: string;
     /**
      * Set the appearance of the picker.
      * `subtle` will remove the borders, background, and icon.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "19.0.0",
+	"version": "19.1.0",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/button": "^25.4.0",
-		"@atlaskit/calendar": "^19.3.0",
+		"@atlaskit/calendar": "^19.4.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
@@ -46,10 +46,10 @@
 		"@atlaskit/popper": "^9.4.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/react-select": "^4.10.0",
-		"@atlaskit/select": "^23.0.0",
-		"@atlaskit/tokens": "^20.0.0",
-		"@atlaskit/top-layer": "^6.0.0",
+		"@atlaskit/react-select": "^4.12.0",
+		"@atlaskit/select": "^23.1.0",
+		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/top-layer": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -63,12 +63,12 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/code": "^20.0.0",
 		"@atlaskit/codemod-utils": "^5.1.0",
-		"@atlaskit/docs": "^12.2.0",
-		"@atlaskit/form": "^18.0.0",
+		"@atlaskit/docs": "^12.3.0",
+		"@atlaskit/form": "^18.1.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/modal-dialog": "^17.0.0",
-		"@atlaskit/popup": "^6.3.0",
+		"@atlaskit/popup": "^9.0.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/textfield": "^10.2.0",
@@ -96,6 +96,10 @@
 		},
 		"platform-dst-locale-week-start-day": {
 			"type": "boolean"
+		},
+		"platform-dst-motion-uplift-input": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"