@atlaskit/datetime-picker 13.11.2 → 14.0.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.timePickerDefaultAriaLabel = exports.default = exports.datePickerDefaultAriaLabel = exports.DateTimePickerWithoutAnalytics = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -16,7 +16,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _select = require("@atlaskit/select");
@@ -26,6 +25,8 @@ var _dateTimePickerContainer = require("../internal/date-time-picker-container")
 var _parseTokens = require("../internal/parse-tokens");
 var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
+var _excluded = ["selectProps"],
+  _excluded2 = ["selectProps"];
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; }
@@ -34,7 +35,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.2";
+var packageVersion = "14.0.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -98,8 +99,6 @@ var dateTimePickerDefaultProps = {
   isInvalid: false,
   datePickerProps: {},
   timePickerProps: {},
-  datePickerSelectProps: {},
-  timePickerSelectProps: {},
   times: _internal.defaultTimes,
   spacing: 'default',
   locale: 'en-US'
@@ -127,9 +126,12 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeState", function () {
-      var mappedState = _objectSpread(_objectSpread({}, _this.state), (0, _pick.default)(_this.props, ['value']));
-      return _objectSpread(_objectSpread({}, mappedState), _this.parseValue(mappedState.value, mappedState.dateValue, mappedState.timeValue, mappedState.zoneValue));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getParsedValues", function () {
+      return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValue", function () {
+      var _this$props$value;
+      return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (event) {
       _this.setState({
@@ -144,20 +146,28 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       _this.props.onFocus(event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDateChange", function (dateValue) {
-      _this.onValueChange(_objectSpread(_objectSpread({}, _this.getSafeState()), {}, {
-        dateValue: dateValue
-      }));
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: dateValue,
+        timeValue: parsedValues.timeValue,
+        zoneValue: parsedValues.zoneValue
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTimeChange", function (timeValue) {
-      _this.onValueChange(_objectSpread(_objectSpread({}, _this.getSafeState()), {}, {
-        timeValue: timeValue
-      }));
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: parsedValues.dateValue,
+        timeValue: timeValue,
+        zoneValue: parsedValues.zoneValue
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
-      _this.onValueChange(_objectSpread(_objectSpread({}, _this.getSafeState()), {}, {
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: '',
         timeValue: '',
-        dateValue: ''
-      }));
+        zoneValue: parsedValues.zoneValue
+      });
     });
     return _this;
   }
@@ -165,7 +175,18 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
     key: "parseValue",
     value: function parseValue(value, dateValue, timeValue, zoneValue) {
       if (this.props.parseValue) {
-        return this.props.parseValue(value, dateValue, timeValue, zoneValue);
+        var parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
+        // This handles cases found in Jira where the parse function actually does
+        // nothing and returns undefined. The previous `getSafeState` function
+        // just spread the values over the state, but if it returned `undefined`,
+        // it would just rely on the previous state values. Considering this is
+        // what is input to this function anyway, this is a safe way to handle
+        // this, colocate the behavior, and not rely on `getSafeState`.
+        return parsedFromFn || {
+          dateValue: dateValue,
+          timeValue: timeValue,
+          zoneValue: zoneValue
+        };
       }
       var parsed = (0, _dateFns.parseISO)(value);
       return (0, _dateFns.isValid)(parsed) ? {
@@ -199,7 +220,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         });
         this.props.onChange(valueWithValidZone);
         // If the date or time value was cleared when there is an existing datetime value, then clear the value.
-      } else if (this.getSafeState().value) {
+      } else if (this.getValue()) {
         this.setState({
           value: ''
         });
@@ -213,9 +234,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         ariaDescribedBy = _this$props['aria-describedby'],
         appearance = _this$props.appearance,
         autoFocus = _this$props.autoFocus,
-        dateFormat = _this$props.dateFormat,
-        datePickerProps = _this$props.datePickerProps,
-        datePickerSelectProps = _this$props.datePickerSelectProps,
+        datePickerPropsWithSelectProps = _this$props.datePickerProps,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
         isDisabled = _this$props.isDisabled,
@@ -224,29 +243,25 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         name = _this$props.name,
         spacing = _this$props.spacing,
         testId = _this$props.testId,
-        timeFormat = _this$props.timeFormat,
-        timeIsEditable = _this$props.timeIsEditable,
-        timePickerProps = _this$props.timePickerProps,
-        timePickerSelectProps = _this$props.timePickerSelectProps,
-        times = _this$props.times;
-      var _this$getSafeState = this.getSafeState(),
-        isFocused = _this$getSafeState.isFocused,
-        value = _this$getSafeState.value,
-        dateValue = _this$getSafeState.dateValue,
-        timeValue = _this$getSafeState.timeValue;
-      var _datePickerSelectProp = datePickerSelectProps.styles,
-        datePickerStyles = _datePickerSelectProp === void 0 ? {} : _datePickerSelectProp;
-      var _timePickerSelectProp = timePickerSelectProps.styles,
-        timePickerStyles = _timePickerSelectProp === void 0 ? {} : _timePickerSelectProp;
+        timePickerPropsWithSelectProps = _this$props.timePickerProps;
+      var value = this.getValue();
+      var isFocused = this.state.isFocused;
+      var parsedValues = this.getParsedValues();
+      var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
+      var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
+      var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
+        datePickerProps = (0, _objectWithoutProperties2.default)(datePickerPropsWithSelectProps, _excluded);
+      var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+      var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
       var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
-        'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
-        'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
-        styles: (0, _select.mergeStyles)(styles, datePickerStyles)
+        styles: (0, _select.mergeStyles)(styles, 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 || timePickerDefaultAriaLabel;
       var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
-        'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
-        'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
-        styles: (0, _select.mergeStyles)(styles, timePickerStyles)
+        styles: (0, _select.mergeStyles)(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
       });
 
       // Render DateTimePicker's IconContainer when a value has been filled
@@ -266,10 +281,11 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         "data-testid": testId && "".concat(testId, "--input")
       }), (0, _react2.jsx)("div", {
         css: datePickerContainerStyles
-      }, (0, _react2.jsx)(_datePicker.default, (0, _extends2.default)({
+      }, (0, _react2.jsx)(_datePicker.default, {
         appearance: appearance,
+        "aria-describedby": datePickerAriaDescribedBy,
         autoFocus: datePickerProps.autoFocus || autoFocus,
-        dateFormat: datePickerProps.dateFormat || dateFormat,
+        dateFormat: datePickerProps.dateFormat,
         defaultIsOpen: datePickerProps.defaultIsOpen,
         defaultValue: datePickerProps.defaultValue,
         disabled: datePickerProps.disabled,
@@ -280,15 +296,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         id: datePickerProps.id || id,
         innerProps: datePickerProps.innerProps,
         isDisabled: datePickerProps.isDisabled || isDisabled,
-        isInvalid: datePickerProps.isInvalid || isInvalid
-        // If you set this or `value` explicitly like
-        // `isOpen={datePickerProps.isOpen}`, the date picker will set
-        // `isOpen` to `undefined` forever. I believe this has to do with
-        // the `getSafeState` function in the picker, since it overwrites
-        // state with values from the props.
-      }, datePickerProps.isOpen ? {
-        isOpen: datePickerProps.isOpen
-      } : {}, {
+        isInvalid: datePickerProps.isInvalid || isInvalid,
+        isOpen: datePickerProps.isOpen,
+        label: datePickerLabel,
         locale: datePickerProps.locale || locale,
         maxDate: datePickerProps.maxDate,
         minDate: datePickerProps.minDate,
@@ -305,10 +315,11 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
         value: dateValue,
         weekStartDay: datePickerProps.weekStartDay
-      }))), (0, _react2.jsx)("div", {
+      })), (0, _react2.jsx)("div", {
         css: timePickerContainerStyles
-      }, (0, _react2.jsx)(_timePicker.default, (0, _extends2.default)({
+      }, (0, _react2.jsx)(_timePicker.default, {
         appearance: timePickerProps.appearance || appearance,
+        "aria-describedby": timePickerAriaDescribedBy,
         autoFocus: timePickerProps.autoFocus,
         defaultIsOpen: timePickerProps.defaultIsOpen,
         defaultValue: timePickerProps.defaultValue,
@@ -317,15 +328,9 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         id: timePickerProps.id,
         innerProps: timePickerProps.innerProps,
         isDisabled: timePickerProps.isDisabled || isDisabled,
-        isInvalid: timePickerProps.isInvalid || isInvalid
-        // If you set this or `value` explicitly like
-        // `isOpen={datePickerProps.isOpen}`, the date picker will set
-        // `isOpen` to `undefined` forever. I believe this has to do with
-        // the `getSafeState` function in the picker, since it overwrites
-        // state with values from the props.
-      }, timePickerProps.isOpen ? {
-        isOpen: timePickerProps.isOpen
-      } : {}, {
+        isInvalid: timePickerProps.isInvalid || isInvalid,
+        isOpen: timePickerProps.isOpen,
+        label: timePickerLabel,
         locale: timePickerProps.locale || locale,
         name: timePickerProps.name,
         onBlur: timePickerProps.onBlur || this.onBlur,
@@ -336,11 +341,11 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         selectProps: mergedTimePickerSelectProps,
         spacing: timePickerProps.spacing || spacing,
         testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
-        timeFormat: timePickerProps.timeFormat || timeFormat,
-        timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
-        times: timePickerProps.times || times,
+        timeFormat: timePickerProps.timeFormat,
+        timeIsEditable: timePickerProps.timeIsEditable,
+        times: timePickerProps.times,
         value: timeValue
-      }))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
+      })), 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

@@ -17,7 +17,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _dateFns = require("date-fns");
-var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
@@ -36,7 +35,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.2";
+var packageVersion = "14.0.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -94,8 +93,13 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeState", function () {
-      return _objectSpread(_objectSpread({}, _this.state), (0, _pick.default)(_this.props, ['value', 'isOpen']));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValue", function () {
+      var _this$props$value;
+      return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getIsOpen", function () {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = _this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : _this.state.isOpen;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (newValue, action) {
       var rawValue = newValue ? newValue.value || newValue : '';
@@ -138,7 +142,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuOpen", function () {
       // Don't open menu after the user has clicked clear
-      if (_this.getSafeState().clearingFromIcon) {
+      if (_this.state.clearingFromIcon) {
         _this.setState({
           clearingFromIcon: false
         });
@@ -150,7 +154,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuClose", function () {
       // Don't close menu after the user has clicked clear
-      if (_this.getSafeState().clearingFromIcon) {
+      if (_this.state.clearingFromIcon) {
         _this.setState({
           clearingFromIcon: false
         });
@@ -184,7 +188,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectKeyDown", function (event) {
       var key = event.key;
       var keyPressed = key.toLowerCase();
-      if (_this.getSafeState().clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
+      if (_this.state.clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
         // If being cleared from keyboard, don't change behaviour
         _this.setState({
           clearingFromIcon: false
@@ -219,10 +223,8 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
         times = _this$props2.times;
       var ICON_PADDING = 2;
       var l10n = (0, _locale.createLocalizationProvider)(locale);
-      var _this$getSafeState = this.getSafeState(),
-        _this$getSafeState$va = _this$getSafeState.value,
-        value = _this$getSafeState$va === void 0 ? '' : _this$getSafeState$va,
-        isOpen = _this$getSafeState.isOpen;
+      var value = this.getValue() || '';
+      var isOpen = this.getIsOpen();
       var _selectProps$styles = selectProps.styles,
         selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
         otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);

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

@@ -9,7 +9,6 @@ import { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -20,7 +19,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.2";
+const packageVersion = "14.0.0";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -56,12 +55,13 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "containerRef", null);
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getSafeState", () => {
-      return {
-        ...this.state,
-        ...pick(this.props, ['value', 'isOpen']),
-        ...pick(this.props.selectProps, ['inputValue'])
-      };
+    _defineProperty(this, "getValue", () => {
+      var _this$props$value;
+      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
+    });
+    _defineProperty(this, "getIsOpen", () => {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
     });
     _defineProperty(this, "isDateDisabled", date => {
       return this.props.disabled.indexOf(date) > -1;
@@ -109,7 +109,7 @@ class DatePickerComponent extends Component {
       });
     });
     _defineProperty(this, "onInputClick", () => {
-      if (!this.props.isDisabled && !this.getSafeState().isOpen) {
+      if (!this.props.isDisabled && !this.getIsOpen()) {
         this.setState({
           isOpen: true
         });
@@ -134,7 +134,7 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onSelectBlur", event => {
       var _this$containerRef3;
       const newlyFocusedElement = event.relatedTarget;
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         this.setState({
           clearingFromIcon: false
@@ -150,9 +150,9 @@ class DatePickerComponent extends Component {
     });
     _defineProperty(this, "onSelectFocus", event => {
       const {
-        clearingFromIcon,
-        value
-      } = this.getSafeState();
+        clearingFromIcon
+      } = this.state;
+      const value = this.getValue();
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         this.setState({
@@ -187,9 +187,9 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onInputKeyDown", event => {
       var _this$containerRef4;
       const {
-        value,
         calendarValue
-      } = this.getSafeState();
+      } = this.state;
+      const value = this.getValue();
       const keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
@@ -323,7 +323,7 @@ class DatePickerComponent extends Component {
       }
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       return l10n.parseDate(date);
     });
     /**
@@ -340,7 +340,7 @@ class DatePickerComponent extends Component {
       } = this.props;
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
@@ -356,7 +356,7 @@ class DatePickerComponent extends Component {
       }
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       return l10n.formatDate(placeholderDatetime);
     });
     this.state = {
@@ -407,14 +407,13 @@ class DatePickerComponent extends Component {
       weekStartDay
     } = this.props;
     const {
-      value,
       calendarValue,
-      isOpen,
       selectInputValue
-    } = this.getSafeState();
+    } = this.state;
+    const value = this.getValue();
     let actualSelectInputValue;
     actualSelectInputValue = selectInputValue;
-    const menuIsOpen = isOpen && !isDisabled;
+    const menuIsOpen = this.getIsOpen() && !isDisabled;
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
     const SingleValue = makeSingleValue({