@atlaskit/datetime-picker 12.7.11 → 12.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/datetime-picker
 
+## 12.8.0
+
+### Minor Changes
+
+- [`0ab32310305`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ab32310305) - [ux] We are testing adding keyboard accessibility to the datepicker change behind a feature flag. If this fix is successful it will be available in a later release.
+
+## 12.7.12
+
+### Patch Changes
+
+- [`5fae4d61ff7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5fae4d61ff7) - Move event handlers to time picker input
+
 ## 12.7.11
 
 ### Patch Changes

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

@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; } } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -82,7 +82,7 @@ var Menu = function Menu(_ref) {
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay,
-      tabIndex: -1
+      tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
     }))),
     testId: selectProps.testId
   });
@@ -168,15 +168,24 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerBlur", function (event) {
       var _this$containerRef;
       var newlyFocusedElement = event.relatedTarget;
+      if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        _this.setState({
+          isOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
+      var _this$containerRef2;
+      var newlyFocusedElement = event.relatedTarget;
       if (_this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
         });
-      } else if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+      } else if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         // Don't close menu if focus is staying within the date picker's
         // container. Makes keyboard accessibility of calendar possible
         _this.setState({
@@ -238,29 +247,37 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       switch (keyPressed) {
         case 'arrowup':
         case 'arrowdown':
-          if (_this.calendarRef) {
-            event.preventDefault();
-            var key = keyPressed === 'arrowup' ? 'up' : 'down';
-            _this.calendarRef.navigate(key);
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            if (_this.calendarRef) {
+              event.preventDefault();
+              var key = keyPressed === 'arrowup' ? 'up' : 'down';
+              _this.calendarRef.navigate(key);
+            }
+            _this.setState({
+              isOpen: true
+            });
           }
-          _this.setState({
-            isOpen: true
-          });
           break;
         case 'arrowleft':
         case 'arrowright':
-          if (_this.calendarRef) {
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec') && _this.calendarRef) {
             event.preventDefault();
             var _key = keyPressed === 'arrowleft' ? 'left' : 'right';
             _this.calendarRef.navigate(_key);
           }
           break;
         case 'escape':
-        case 'tab':
           _this.setState({
             isOpen: false
           });
           break;
+        case 'tab':
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            _this.setState({
+              isOpen: false
+            });
+          }
+          break;
         case 'backspace':
         case 'delete':
           {
@@ -485,6 +502,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         // (DSP-11587)
         (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
           role: "presentation",
+          onBlur: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.accessible-datetime-picker_691ec') ? this.onContainerBlur : undefined,
           onClick: this.onInputClick,
           onInput: this.onTextInput,
           onKeyDown: this.onInputKeyDown,

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable @repo/internal/react/use-noop */ /** @jsx jsx */ // eslint-disable-next-line no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -341,9 +341,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ?
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      (0, _react2.jsx)("button", {
+      }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
         css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),

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

@@ -39,7 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; } }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -321,46 +321,42 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           });
         }
       });
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        _react.default.createElement("div", (0, _extends2.default)({}, innerProps, {
-          ref: this.setContainerRef,
-          "data-testid": testId && "".concat(testId, "--container"),
-          onKeyDown: this.onSelectKeyDown
-        }), /*#__PURE__*/_react.default.createElement("input", {
-          name: name,
-          type: "hidden",
-          value: value,
-          "data-testid": testId && "".concat(testId, "--input")
-        }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
-          appearance: this.props.appearance,
-          autoFocus: autoFocus,
-          components: selectComponents,
-          instanceId: id,
-          isClearable: true,
-          isDisabled: isDisabled,
-          menuIsOpen: isOpen && !isDisabled,
-          menuPlacement: "auto",
-          openMenuOnFocus: true,
-          onBlur: this.onBlur,
-          onCreateOption: this.onCreateOption,
-          onChange: this.onChange,
-          options: this.getOptions(),
-          onFocus: this.onFocus,
-          onMenuOpen: this.onMenuOpen,
-          onMenuClose: this.onMenuClose,
-          placeholder: this.getPlaceholder(),
-          styles: mergedStyles,
-          value: labelAndValue,
-          spacing: spacing
-          // @ts-ignore caused by prop not part of @atlaskit/select
-          ,
-          fixedLayerRef: this.containerRef,
-          isInvalid: isInvalid,
-          testId: testId
-        }, otherSelectProps)))
-      );
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, innerProps, {
+        ref: this.setContainerRef,
+        "data-testid": testId && "".concat(testId, "--container")
+      }), /*#__PURE__*/_react.default.createElement("input", {
+        name: name,
+        type: "hidden",
+        value: value,
+        "data-testid": testId && "".concat(testId, "--input"),
+        onKeyDown: this.onSelectKeyDown
+      }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+        appearance: this.props.appearance,
+        autoFocus: autoFocus,
+        components: selectComponents,
+        instanceId: id,
+        isClearable: true,
+        isDisabled: isDisabled,
+        menuIsOpen: isOpen && !isDisabled,
+        menuPlacement: "auto",
+        openMenuOnFocus: true,
+        onBlur: this.onBlur,
+        onCreateOption: this.onCreateOption,
+        onChange: this.onChange,
+        options: this.getOptions(),
+        onFocus: this.onFocus,
+        onMenuOpen: this.onMenuOpen,
+        onMenuClose: this.onMenuClose,
+        placeholder: this.getPlaceholder(),
+        styles: mergedStyles,
+        value: labelAndValue,
+        spacing: spacing
+        // @ts-ignore caused by prop not part of @atlaskit/select
+        ,
+        fixedLayerRef: this.containerRef,
+        isInvalid: isInvalid,
+        testId: testId
+      }, otherSelectProps)));
     }
   }]);
   return TimePicker;

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

@@ -20,7 +20,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.11";
+const packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -64,7 +64,7 @@ const Menu = ({
     locale: selectProps.calendarLocale,
     testId: selectProps.testId && `${selectProps.testId}--calendar`,
     weekStartDay: selectProps.calendarWeekStartDay,
-    tabIndex: -1
+    tabIndex: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
   }))),
   testId: selectProps.testId
 });
@@ -146,15 +146,24 @@ class DatePicker extends Component {
         });
       }
     });
-    _defineProperty(this, "onSelectBlur", event => {
+    _defineProperty(this, "onContainerBlur", event => {
       var _this$containerRef;
       const newlyFocusedElement = event.relatedTarget;
+      if (!((_this$containerRef = this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        this.setState({
+          isOpen: false
+        });
+      }
+    });
+    _defineProperty(this, "onSelectBlur", event => {
+      var _this$containerRef2;
+      const newlyFocusedElement = event.relatedTarget;
       if (this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         this.setState({
           clearingFromIcon: false
         });
-      } else if (!((_this$containerRef = this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+      } else if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         // Don't close menu if focus is staying within the date picker's
         // container. Makes keyboard accessibility of calendar possible
         this.setState({
@@ -218,29 +227,37 @@ class DatePicker extends Component {
       switch (keyPressed) {
         case 'arrowup':
         case 'arrowdown':
-          if (this.calendarRef) {
-            event.preventDefault();
-            const key = keyPressed === 'arrowup' ? 'up' : 'down';
-            this.calendarRef.navigate(key);
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            if (this.calendarRef) {
+              event.preventDefault();
+              const key = keyPressed === 'arrowup' ? 'up' : 'down';
+              this.calendarRef.navigate(key);
+            }
+            this.setState({
+              isOpen: true
+            });
           }
-          this.setState({
-            isOpen: true
-          });
           break;
         case 'arrowleft':
         case 'arrowright':
-          if (this.calendarRef) {
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') && this.calendarRef) {
             event.preventDefault();
             const key = keyPressed === 'arrowleft' ? 'left' : 'right';
             this.calendarRef.navigate(key);
           }
           break;
         case 'escape':
-        case 'tab':
           this.setState({
             isOpen: false
           });
           break;
+        case 'tab':
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            this.setState({
+              isOpen: false
+            });
+          }
+          break;
         case 'backspace':
         case 'delete':
           {
@@ -475,6 +492,7 @@ class DatePicker extends Component {
       // (DSP-11587)
       jsx("div", _extends({}, innerProps, {
         role: "presentation",
+        onBlur: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? this.onContainerBlur : undefined,
         onClick: this.onInputClick,
         onInput: this.onTextInput,
         onKeyDown: this.onInputKeyDown,

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

@@ -17,7 +17,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.11";
+const packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -327,9 +327,7 @@ class DateTimePicker extends React.Component {
       timeFormat: timeFormat,
       locale: locale,
       testId: testId && `${testId}--timepicker`
-    }, timePickerProps))), isClearable && !isDisabled ?
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    jsx("button", {
+    }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
       css: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,

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

@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.7.11";
+const packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -295,46 +295,42 @@ class TimePicker extends React.Component {
         paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
       })
     });
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      React.createElement("div", _extends({}, innerProps, {
-        ref: this.setContainerRef,
-        "data-testid": testId && `${testId}--container`,
-        onKeyDown: this.onSelectKeyDown
-      }), /*#__PURE__*/React.createElement("input", {
-        name: name,
-        type: "hidden",
-        value: value,
-        "data-testid": testId && `${testId}--input`
-      }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-        appearance: this.props.appearance,
-        autoFocus: autoFocus,
-        components: selectComponents,
-        instanceId: id,
-        isClearable: true,
-        isDisabled: isDisabled,
-        menuIsOpen: isOpen && !isDisabled,
-        menuPlacement: "auto",
-        openMenuOnFocus: true,
-        onBlur: this.onBlur,
-        onCreateOption: this.onCreateOption,
-        onChange: this.onChange,
-        options: this.getOptions(),
-        onFocus: this.onFocus,
-        onMenuOpen: this.onMenuOpen,
-        onMenuClose: this.onMenuClose,
-        placeholder: this.getPlaceholder(),
-        styles: mergedStyles,
-        value: labelAndValue,
-        spacing: spacing
-        // @ts-ignore caused by prop not part of @atlaskit/select
-        ,
-        fixedLayerRef: this.containerRef,
-        isInvalid: isInvalid,
-        testId: testId
-      }, otherSelectProps)))
-    );
+    return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      ref: this.setContainerRef,
+      "data-testid": testId && `${testId}--container`
+    }), /*#__PURE__*/React.createElement("input", {
+      name: name,
+      type: "hidden",
+      value: value,
+      "data-testid": testId && `${testId}--input`,
+      onKeyDown: this.onSelectKeyDown
+    }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+      appearance: this.props.appearance,
+      autoFocus: autoFocus,
+      components: selectComponents,
+      instanceId: id,
+      isClearable: true,
+      isDisabled: isDisabled,
+      menuIsOpen: isOpen && !isDisabled,
+      menuPlacement: "auto",
+      openMenuOnFocus: true,
+      onBlur: this.onBlur,
+      onCreateOption: this.onCreateOption,
+      onChange: this.onChange,
+      options: this.getOptions(),
+      onFocus: this.onFocus,
+      onMenuOpen: this.onMenuOpen,
+      onMenuClose: this.onMenuClose,
+      placeholder: this.getPlaceholder(),
+      styles: mergedStyles,
+      value: labelAndValue,
+      spacing: spacing
+      // @ts-ignore caused by prop not part of @atlaskit/select
+      ,
+      fixedLayerRef: this.containerRef,
+      isInvalid: isInvalid,
+      testId: testId
+    }, otherSelectProps)));
   }
 }
 _defineProperty(TimePicker, "defaultProps", timePickerDefaultProps);

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

@@ -31,7 +31,7 @@ import FixedLayer from '../internal/fixed-layer';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -75,7 +75,7 @@ var Menu = function Menu(_ref) {
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay,
-      tabIndex: -1
+      tabIndex: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? undefined : -1
     }))),
     testId: selectProps.testId
   });
@@ -161,15 +161,24 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onContainerBlur", function (event) {
       var _this$containerRef;
       var newlyFocusedElement = event.relatedTarget;
+      if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+        _this.setState({
+          isOpen: false
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
+      var _this$containerRef2;
+      var newlyFocusedElement = event.relatedTarget;
       if (_this.getSafeState().clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
         });
-      } else if (!((_this$containerRef = _this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.contains(newlyFocusedElement))) {
+      } else if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         // Don't close menu if focus is staying within the date picker's
         // container. Makes keyboard accessibility of calendar possible
         _this.setState({
@@ -231,29 +240,37 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       switch (keyPressed) {
         case 'arrowup':
         case 'arrowdown':
-          if (_this.calendarRef) {
-            event.preventDefault();
-            var key = keyPressed === 'arrowup' ? 'up' : 'down';
-            _this.calendarRef.navigate(key);
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            if (_this.calendarRef) {
+              event.preventDefault();
+              var key = keyPressed === 'arrowup' ? 'up' : 'down';
+              _this.calendarRef.navigate(key);
+            }
+            _this.setState({
+              isOpen: true
+            });
           }
-          _this.setState({
-            isOpen: true
-          });
           break;
         case 'arrowleft':
         case 'arrowright':
-          if (_this.calendarRef) {
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') && _this.calendarRef) {
             event.preventDefault();
             var _key = keyPressed === 'arrowleft' ? 'left' : 'right';
             _this.calendarRef.navigate(_key);
           }
           break;
         case 'escape':
-        case 'tab':
           _this.setState({
             isOpen: false
           });
           break;
+        case 'tab':
+          if (!getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec')) {
+            _this.setState({
+              isOpen: false
+            });
+          }
+          break;
         case 'backspace':
         case 'delete':
           {
@@ -478,6 +495,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         // (DSP-11587)
         jsx("div", _extends({}, innerProps, {
           role: "presentation",
+          onBlur: getBooleanFF('platform.design-system-team.accessible-datetime-picker_691ec') ? this.onContainerBlur : undefined,
           onClick: this.onInputClick,
           onInput: this.onTextInput,
           onKeyDown: this.onInputKeyDown,

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

@@ -27,7 +27,7 @@ import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -335,9 +335,7 @@ var DateTimePicker = /*#__PURE__*/function (_React$Component) {
         timeFormat: timeFormat,
         locale: locale,
         testId: testId && "".concat(testId, "--timepicker")
-      }, timePickerProps))), isClearable && !isDisabled ?
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      jsx("button", {
+      }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
         css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),

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

@@ -30,7 +30,7 @@ import parseTime from '../internal/parse-time';
 import { makeSingleValue } from '../internal/single-value';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.7.11";
+var packageVersion = "12.8.0";
 
 /* eslint-disable react/no-unused-prop-types */
 
@@ -312,46 +312,42 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           });
         }
       });
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        React.createElement("div", _extends({}, innerProps, {
-          ref: this.setContainerRef,
-          "data-testid": testId && "".concat(testId, "--container"),
-          onKeyDown: this.onSelectKeyDown
-        }), /*#__PURE__*/React.createElement("input", {
-          name: name,
-          type: "hidden",
-          value: value,
-          "data-testid": testId && "".concat(testId, "--input")
-        }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-          appearance: this.props.appearance,
-          autoFocus: autoFocus,
-          components: selectComponents,
-          instanceId: id,
-          isClearable: true,
-          isDisabled: isDisabled,
-          menuIsOpen: isOpen && !isDisabled,
-          menuPlacement: "auto",
-          openMenuOnFocus: true,
-          onBlur: this.onBlur,
-          onCreateOption: this.onCreateOption,
-          onChange: this.onChange,
-          options: this.getOptions(),
-          onFocus: this.onFocus,
-          onMenuOpen: this.onMenuOpen,
-          onMenuClose: this.onMenuClose,
-          placeholder: this.getPlaceholder(),
-          styles: mergedStyles,
-          value: labelAndValue,
-          spacing: spacing
-          // @ts-ignore caused by prop not part of @atlaskit/select
-          ,
-          fixedLayerRef: this.containerRef,
-          isInvalid: isInvalid,
-          testId: testId
-        }, otherSelectProps)))
-      );
+      return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+        ref: this.setContainerRef,
+        "data-testid": testId && "".concat(testId, "--container")
+      }), /*#__PURE__*/React.createElement("input", {
+        name: name,
+        type: "hidden",
+        value: value,
+        "data-testid": testId && "".concat(testId, "--input"),
+        onKeyDown: this.onSelectKeyDown
+      }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+        appearance: this.props.appearance,
+        autoFocus: autoFocus,
+        components: selectComponents,
+        instanceId: id,
+        isClearable: true,
+        isDisabled: isDisabled,
+        menuIsOpen: isOpen && !isDisabled,
+        menuPlacement: "auto",
+        openMenuOnFocus: true,
+        onBlur: this.onBlur,
+        onCreateOption: this.onCreateOption,
+        onChange: this.onChange,
+        options: this.getOptions(),
+        onFocus: this.onFocus,
+        onMenuOpen: this.onMenuOpen,
+        onMenuClose: this.onMenuClose,
+        placeholder: this.getPlaceholder(),
+        styles: mergedStyles,
+        value: labelAndValue,
+        spacing: spacing
+        // @ts-ignore caused by prop not part of @atlaskit/select
+        ,
+        fixedLayerRef: this.containerRef,
+        isInvalid: isInvalid,
+        testId: testId
+      }, otherSelectProps)));
     }
   }]);
   return TimePicker;

package/dist/types/components/date-picker.d.ts

@@ -232,6 +232,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         iso: string;
     }) => void;
     onInputClick: () => void;
+    onContainerBlur: (event: React.FocusEvent<HTMLElement>) => void;
     onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -232,6 +232,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         iso: string;
     }) => void;
     onInputClick: () => void;
+    onContainerBlur: (event: React.FocusEvent<HTMLElement>) => void;
     onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
     onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
     onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.7.11",
+  "version": "12.8.0",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -101,6 +101,9 @@
     },
     "platform.design-system-team.date-picker-input-a11y-fix_cbbxs": {
       "type": "boolean"
+    },
+    "platform.design-system-team.accessible-datetime-picker_691ec": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",