@atlaskit/datetime-picker 13.11.1 → 13.11.3

package/dist/es2019/internal/menu.js

@@ -11,13 +11,20 @@ import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
-function getValidDate(iso) {
-  const date = parseISO(iso);
-  return isValid(date) ? {
-    day: date.getDate(),
-    month: date.getMonth() + 1,
-    year: date.getFullYear()
-  } : {};
+
+/**
+ * @param isos A series of ISO dates.
+ * @returns The last valid date within the array of ISO strings.
+ */
+function getValidDate(isos) {
+  return isos.reduce((acc, iso) => {
+    const date = parseISO(iso);
+    return isValid(date) ? {
+      day: date.getDate(),
+      month: date.getMonth() + 1,
+      year: date.getFullYear()
+    } : acc;
+  }, {});
 }
 const menuStyles = css({
   zIndex: layers.dialog(),
@@ -33,28 +40,42 @@ const menuStyles = css({
 export const Menu = ({
   selectProps,
   innerProps
-}) => jsx(UNSAFE_LAYERING, {
-  isDisabled: false
-}, jsx(FixedLayer, {
-  inputValue: selectProps.inputValue,
-  containerRef: selectProps.calendarContainerRef,
-  content: jsx("div", _extends({
-    css: menuStyles
-  }, innerProps), jsx(Calendar, _extends({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
-    disabled: selectProps.calendarDisabled,
-    disabledDateFilter: selectProps.calendarDisabledDateFilter,
-    minDate: selectProps.calendarMinDate,
-    maxDate: selectProps.calendarMaxDate,
-    nextMonthLabel: selectProps.nextMonthLabel,
-    onChange: selectProps.onCalendarChange,
-    onSelect: selectProps.onCalendarSelect,
-    previousMonthLabel: selectProps.previousMonthLabel,
-    calendarRef: selectProps.calendarRef,
-    selected: [selectProps.calendarValue],
-    shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
-    locale: selectProps.calendarLocale,
-    testId: selectProps.testId && `${selectProps.testId}--calendar`,
-    weekStartDay: selectProps.calendarWeekStartDay
-  }))),
-  testId: selectProps.testId
-}));
+}) => {
+  const {
+    calendarValue,
+    calendarView
+  } = selectProps;
+  const {
+    day,
+    month,
+    year
+  } = getValidDate([calendarValue, calendarView]);
+  return jsx(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, jsx(FixedLayer, {
+    inputValue: selectProps.inputValue,
+    containerRef: selectProps.calendarContainerRef,
+    content: jsx("div", _extends({
+      css: menuStyles
+    }, innerProps), jsx(Calendar, {
+      day: day,
+      month: month,
+      year: year,
+      disabled: selectProps.calendarDisabled,
+      disabledDateFilter: selectProps.calendarDisabledDateFilter,
+      minDate: selectProps.calendarMinDate,
+      maxDate: selectProps.calendarMaxDate,
+      nextMonthLabel: selectProps.nextMonthLabel,
+      onChange: selectProps.onCalendarChange,
+      onSelect: selectProps.onCalendarSelect,
+      previousMonthLabel: selectProps.previousMonthLabel,
+      calendarRef: selectProps.calendarRef,
+      selected: [selectProps.calendarValue],
+      shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
+      locale: selectProps.calendarLocale,
+      testId: selectProps.testId && `${selectProps.testId}--calendar`,
+      weekStartDay: selectProps.calendarWeekStartDay
+    })),
+    testId: selectProps.testId
+  }));
+};

package/dist/es2019/internal/single-value.js

@@ -10,11 +10,44 @@ export const makeSingleValue = ({
   lang
 }) => ({
   children,
-  ...props
+  className,
+  clearValue,
+  cx,
+  data,
+  getStyles,
+  getValue,
+  hasValue,
+  isDisabled,
+  isMulti,
+  isRtl,
+  options,
+  selectOption,
+  selectProps,
+  setValue,
+  theme,
+  ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(components.SingleValue, _extends({}, rest, {
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+    className: className,
+    clearValue: clearValue,
+    cx: cx,
+    data: data,
+    getStyles: getStyles,
+    getValue: getValue,
+    hasValue: hasValue,
     innerProps: {
       lang
-    }
+    },
+    isDisabled: isDisabled,
+    isMulti: isMulti,
+    isRtl: isRtl,
+    options: options,
+    selectOption: selectOption,
+    selectProps: selectProps,
+    setValue: setValue
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    theme: theme
   }), children);
 };

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

@@ -20,7 +20,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';
@@ -31,7 +30,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.1";
+var packageVersion = "13.11.3";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -73,8 +72,13 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "getSafeState", function () {
-      return _objectSpread(_objectSpread(_objectSpread({}, _this.state), pick(_this.props, ['value', 'isOpen'])), pick(_this.props.selectProps, ['inputValue']));
+    _defineProperty(_assertThisInitialized(_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;
+    });
+    _defineProperty(_assertThisInitialized(_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;
     });
     _defineProperty(_assertThisInitialized(_this), "isDateDisabled", function (date) {
       return _this.props.disabled.indexOf(date) > -1;
@@ -124,7 +128,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
-      if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
+      if (!_this.props.isDisabled && !_this.getIsOpen()) {
         _this.setState({
           isOpen: true
         });
@@ -149,7 +153,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
       var _this$containerRef3;
       var 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
@@ -164,9 +168,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onSelectFocus", function (event) {
-      var _this$getSafeState = _this.getSafeState(),
-        clearingFromIcon = _this$getSafeState.clearingFromIcon,
-        value = _this$getSafeState.value;
+      var clearingFromIcon = _this.state.clearingFromIcon;
+      var value = _this.getValue();
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         _this.setState({
@@ -200,9 +203,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
       var _this$containerRef4;
-      var _this$getSafeState2 = _this.getSafeState(),
-        value = _this$getSafeState2.value,
-        calendarValue = _this$getSafeState2.calendarValue;
+      var calendarValue = _this.state.calendarValue;
+      var value = _this.getValue();
       var keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
@@ -330,8 +332,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       if (parseInputValue) {
         return parseInputValue(date, dateFormat || defaultDateFormat);
       }
-      var _this$getSafeState3 = _this.getSafeState(),
-        l10n = _this$getSafeState3.l10n;
+      var l10n = _this.state.l10n;
       return l10n.parseDate(date);
     });
     /**
@@ -345,8 +346,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         dateFormat = _this$props2.dateFormat;
-      var _this$getSafeState4 = _this.getSafeState(),
-        l10n = _this$getSafeState4.l10n;
+      var l10n = _this.state.l10n;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
@@ -358,8 +358,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       if (placeholder) {
         return placeholder;
       }
-      var _this$getSafeState5 = _this.getSafeState(),
-        l10n = _this$getSafeState5.l10n;
+      var l10n = _this.state.l10n;
       return l10n.formatDate(placeholderDatetime);
     });
     _this.state = {
@@ -401,14 +400,13 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         locale = _this$props3.locale,
         testId = _this$props3.testId,
         weekStartDay = _this$props3.weekStartDay;
-      var _this$getSafeState6 = this.getSafeState(),
-        value = _this$getSafeState6.value,
-        calendarValue = _this$getSafeState6.calendarValue,
-        isOpen = _this$getSafeState6.isOpen,
-        selectInputValue = _this$getSafeState6.selectInputValue;
+      var _this$state = this.state,
+        calendarValue = _this$state.calendarValue,
+        selectInputValue = _this$state.selectInputValue;
+      var value = this.getValue();
       var actualSelectInputValue;
       actualSelectInputValue = selectInputValue;
-      var menuIsOpen = isOpen && !isDisabled;
+      var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
       var SingleValue = makeSingleValue({
@@ -440,8 +438,6 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
-        nextMonthLabel: nextMonthLabel,
-        previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
       var mergedStyles = mergeStyles(selectStyles, {
@@ -478,31 +474,48 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), jsx(Select, _extends({
+          appearance: this.props.appearance,
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
-          appearance: this.props.appearance,
-          enableAnimation: false,
-          menuIsOpen: menuIsOpen,
-          closeMenuOnSelect: true,
           autoFocus: autoFocus,
+          closeMenuOnSelect: true,
+          components: selectComponents,
+          enableAnimation: false,
           inputId: id,
+          inputValue: actualSelectInputValue,
           isDisabled: isDisabled,
+          menuIsOpen: menuIsOpen,
           onBlur: this.onSelectBlur,
+          onChange: this.onSelectChange,
           onFocus: this.onSelectFocus,
-          inputValue: actualSelectInputValue,
           onInputChange: this.handleSelectInputChange,
-          components: selectComponents,
-          onChange: this.onSelectChange
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          ,
-          styles: mergedStyles,
           placeholder: this.getPlaceholder(),
+          styles: mergedStyles,
           value: initialValue
-        }, selectProps, calendarProps, {
+        }, selectProps, {
+          // These are below the spread because I don't know what is in
+          // selectProps or not and what wil be overwritten
           isClearable: true,
-          spacing: spacing,
           isInvalid: isInvalid,
+          spacing: spacing,
           testId: testId
+          // These aren't part of `Select`'s API, but we're using them here.
+          ,
+          calendarContainerRef: calendarProps.calendarContainerRef,
+          calendarDisabled: calendarProps.calendarDisabled,
+          calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+          calendarLocale: calendarProps.calendarLocale,
+          calendarMaxDate: calendarProps.calendarMaxDate,
+          calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
+          calendarValue: calendarProps.calendarValue,
+          calendarView: calendarProps.calendarView,
+          calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+          nextMonthLabel: nextMonthLabel,
+          onCalendarChange: calendarProps.onCalendarChange,
+          onCalendarSelect: calendarProps.onCalendarSelect,
+          previousMonthLabel: previousMonthLabel,
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
         })))
       );
     }

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -19,7 +18,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { mergeStyles } from '@atlaskit/select';
@@ -30,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 = "13.11.1";
+var packageVersion = "13.11.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -123,9 +121,12 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(_assertThisInitialized(_this), "getSafeState", function () {
-      var mappedState = _objectSpread(_objectSpread({}, _this.state), pick(_this.props, ['value']));
-      return _objectSpread(_objectSpread({}, mappedState), _this.parseValue(mappedState.value, mappedState.dateValue, mappedState.timeValue, mappedState.zoneValue));
+    _defineProperty(_assertThisInitialized(_this), "getParsedValues", function () {
+      return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
+    });
+    _defineProperty(_assertThisInitialized(_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;
     });
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
       _this.setState({
@@ -140,20 +141,28 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
       _this.props.onFocus(event);
     });
     _defineProperty(_assertThisInitialized(_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
+      });
     });
     _defineProperty(_assertThisInitialized(_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
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "onClear", function () {
-      _this.onValueChange(_objectSpread(_objectSpread({}, _this.getSafeState()), {}, {
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: '',
         timeValue: '',
-        dateValue: ''
-      }));
+        zoneValue: parsedValues.zoneValue
+      });
     });
     return _this;
   }
@@ -161,7 +170,18 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
     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 = parseISO(value);
       return isValid(parsed) ? {
@@ -195,7 +215,7 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         });
         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: ''
         });
@@ -225,11 +245,11 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         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 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 _datePickerSelectProp = datePickerSelectProps.styles,
         datePickerStyles = _datePickerSelectProp === void 0 ? {} : _datePickerSelectProp;
       var _timePickerSelectProp = timePickerSelectProps.styles,
@@ -262,41 +282,67 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": testId && "".concat(testId, "--input")
       }), jsx("div", {
         css: datePickerContainerStyles
-      }, jsx(DatePicker, _extends({
+      }, jsx(DatePicker, {
         appearance: appearance,
-        autoFocus: autoFocus,
-        dateFormat: dateFormat,
-        hideIcon: true,
-        id: id,
-        isDisabled: isDisabled,
-        isInvalid: isInvalid,
-        locale: locale,
-        onBlur: this.onBlur,
-        onChange: this.onDateChange,
-        onFocus: this.onFocus,
+        autoFocus: datePickerProps.autoFocus || autoFocus,
+        dateFormat: datePickerProps.dateFormat || dateFormat,
+        defaultIsOpen: datePickerProps.defaultIsOpen,
+        defaultValue: datePickerProps.defaultValue,
+        disabled: datePickerProps.disabled,
+        disabledDateFilter: datePickerProps.disabledDateFilter,
+        formatDisplayLabel: datePickerProps.formatDisplayLabel,
+        hideIcon: datePickerProps.hideIcon || true,
+        icon: datePickerProps.icon,
+        id: datePickerProps.id || id,
+        innerProps: datePickerProps.innerProps,
+        isDisabled: datePickerProps.isDisabled || isDisabled,
+        isInvalid: datePickerProps.isInvalid || isInvalid,
+        isOpen: datePickerProps.isOpen,
+        locale: datePickerProps.locale || locale,
+        maxDate: datePickerProps.maxDate,
+        minDate: datePickerProps.minDate,
+        name: datePickerProps.name,
+        nextMonthLabel: datePickerProps.nextMonthLabel,
+        onBlur: datePickerProps.onBlur || this.onBlur,
+        onChange: datePickerProps.onChange || this.onDateChange,
+        onFocus: datePickerProps.onFocus || this.onFocus,
+        parseInputValue: datePickerProps.parseInputValue,
+        placeholder: datePickerProps.placeholder,
+        previousMonthLabel: datePickerProps.previousMonthLabel,
         selectProps: mergedDatePickerSelectProps,
-        spacing: spacing,
-        testId: testId && "".concat(testId, "--datepicker"),
-        value: dateValue
-      }, datePickerProps))), jsx("div", {
+        spacing: datePickerProps.spacing || spacing,
+        testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
+        value: dateValue,
+        weekStartDay: datePickerProps.weekStartDay
+      })), jsx("div", {
         css: timePickerContainerStyles
-      }, jsx(TimePicker, _extends({
-        appearance: appearance,
-        hideIcon: true,
-        isDisabled: isDisabled,
-        isInvalid: isInvalid,
-        locale: locale,
-        onBlur: this.onBlur,
-        onChange: this.onTimeChange,
-        onFocus: this.onFocus,
+      }, jsx(TimePicker, {
+        appearance: timePickerProps.appearance || appearance,
+        autoFocus: timePickerProps.autoFocus,
+        defaultIsOpen: timePickerProps.defaultIsOpen,
+        defaultValue: timePickerProps.defaultValue,
+        formatDisplayLabel: timePickerProps.formatDisplayLabel,
+        hideIcon: timePickerProps.hideIcon || true,
+        id: timePickerProps.id,
+        innerProps: timePickerProps.innerProps,
+        isDisabled: timePickerProps.isDisabled || isDisabled,
+        isInvalid: timePickerProps.isInvalid || isInvalid,
+        isOpen: timePickerProps.isOpen,
+        locale: timePickerProps.locale || locale,
+        name: timePickerProps.name,
+        onBlur: timePickerProps.onBlur || this.onBlur,
+        onChange: timePickerProps.onChange || this.onTimeChange,
+        onFocus: timePickerProps.onFocus || this.onFocus,
+        parseInputValue: timePickerProps.parseInputValue,
+        placeholder: timePickerProps.placeholder,
         selectProps: mergedTimePickerSelectProps,
-        spacing: spacing,
-        testId: testId && "".concat(testId, "--timepicker"),
-        timeFormat: timeFormat,
-        timeIsEditable: timeIsEditable,
-        times: times,
+        spacing: timePickerProps.spacing || spacing,
+        testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
+        timeFormat: timePickerProps.timeFormat || timeFormat,
+        timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
+        times: timePickerProps.times || times,
         value: timeValue
-      }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
+      })), isClearable && !isDisabled ? jsx("button", {
         css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),

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

@@ -16,7 +16,6 @@ import React from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import { format, isValid } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
@@ -28,7 +27,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.1";
+var packageVersion = "13.11.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -86,8 +85,13 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(_assertThisInitialized(_this), "getSafeState", function () {
-      return _objectSpread(_objectSpread({}, _this.state), pick(_this.props, ['value', 'isOpen']));
+    _defineProperty(_assertThisInitialized(_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;
+    });
+    _defineProperty(_assertThisInitialized(_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;
     });
     _defineProperty(_assertThisInitialized(_this), "onChange", function (newValue, action) {
       var rawValue = newValue ? newValue.value || newValue : '';
@@ -130,7 +134,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_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
         });
@@ -142,7 +146,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_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
         });
@@ -176,7 +180,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_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
@@ -211,10 +215,8 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
         times = _this$props2.times;
       var ICON_PADDING = 2;
       var l10n = 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 = _objectWithoutProperties(selectProps, _excluded);
@@ -313,9 +315,7 @@ var TimePickerComponent = /*#__PURE__*/function (_React$Component) {
         placeholder: placeholder || l10n.formatTime(placeholderDatetime),
         styles: mergedStyles,
         value: initialValue,
-        spacing: spacing
-        // @ts-ignore caused by prop not part of @atlaskit/select
-        ,
+        spacing: spacing,
         fixedLayerRef: this.containerRef,
         isInvalid: isInvalid,
         testId: testId