@atlaskit/datetime-picker 14.0.1 → 14.0.3

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

@@ -5,19 +5,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TimePickerWithoutAnalytics = void 0;
+exports.default = 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"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _locale = require("@atlaskit/locale");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _constants = require("@atlaskit/theme/constants");
@@ -30,12 +26,10 @@ var _excluded = ["styles"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { 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
+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; } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "14.0.1";
+var packageVersion = "14.0.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -44,295 +38,12 @@ var menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
-var timePickerDefaultProps = {
-  appearance: 'default',
-  autoFocus: false,
-  defaultIsOpen: false,
-  defaultValue: '',
-  hideIcon: false,
-  id: '',
-  innerProps: {},
-  isDisabled: false,
-  isInvalid: false,
-  label: '',
-  name: '',
-  // These disables are here for proper typing when used as defaults. They
-  // should *not* use the `noop` function.
-  /* eslint-disable @repo/internal/react/use-noop */
-  onBlur: function onBlur(_event) {},
-  onChange: function onChange(_value) {},
-  onFocus: function onFocus(_event) {},
-  /* eslint-enable @repo/internal/react/use-noop */
-  parseInputValue: function parseInputValue(time, _timeFormat) {
-    return (0, _parseTime.default)(time);
-  },
-  selectProps: {},
-  spacing: 'default',
-  times: _internal.defaultTimes,
-  timeIsEditable: false,
-  locale: 'en-US'
-  // Not including a default prop for value as it will
-  // Make the component a controlled component
+var analyticsAttributes = {
+  componentName: 'timePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
 };
-var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(TimePickerComponent, _React$Component);
-  var _super = _createSuper(TimePickerComponent);
-  function TimePickerComponent() {
-    var _this;
-    (0, _classCallCheck2.default)(this, TimePickerComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerRef", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isOpen: _this.props.defaultIsOpen,
-      clearingFromIcon: false,
-      value: _this.props.defaultValue,
-      isFocused: false
-    });
-    // 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), "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 : '';
-      var value = rawValue.toString();
-      var changedState = {
-        value: value
-      };
-      if (action && action.action === 'clear') {
-        changedState = _objectSpread(_objectSpread({}, changedState), {}, {
-          clearingFromIcon: true
-        });
-      }
-      _this.setState(changedState);
-      _this.props.onChange(value);
-    });
-    /**
-     * Only allow custom times if timeIsEditable prop is true
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCreateOption", function (inputValue) {
-      if (_this.props.timeIsEditable) {
-        var _this$props = _this.props,
-          parseInputValue = _this$props.parseInputValue,
-          timeFormat = _this$props.timeFormat;
-        var sanitizedInput;
-        try {
-          sanitizedInput = parseInputValue(inputValue, timeFormat || _internal.defaultTimeFormat);
-        } catch (e) {
-          return; // do nothing, the main validation should happen in the form
-        }
-        var includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
-        var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
-        var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
-        _this.setState({
-          value: formattedValue
-        });
-        _this.props.onChange(formattedValue);
-      } else {
-        _this.onChange(inputValue);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuOpen", function () {
-      // Don't open menu after the user has clicked clear
-      if (_this.state.clearingFromIcon) {
-        _this.setState({
-          clearingFromIcon: false
-        });
-      } else {
-        _this.setState({
-          isOpen: true
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuClose", function () {
-      // Don't close menu after the user has clicked clear
-      if (_this.state.clearingFromIcon) {
-        _this.setState({
-          clearingFromIcon: false
-        });
-      } else {
-        _this.setState({
-          isOpen: false
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContainerRef", function (ref) {
-      var oldRef = _this.containerRef;
-      _this.containerRef = ref;
-      // Cause a re-render if we're getting the container ref for the first time
-      // as the layered menu requires it for dimension calculation
-      if (oldRef == null && ref != null) {
-        _this.forceUpdate();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (event) {
-      _this.setState({
-        isFocused: false
-      });
-      _this.props.onBlur(event);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (event) {
-      _this.setState({
-        isFocused: true
-      });
-      _this.props.onFocus(event);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectKeyDown", function (event) {
-      var key = event.key;
-      var keyPressed = key.toLowerCase();
-      if (_this.state.clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
-        // If being cleared from keyboard, don't change behaviour
-        _this.setState({
-          clearingFromIcon: false
-        });
-      }
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(TimePickerComponent, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        appearance = _this$props2.appearance,
-        ariaDescribedBy = _this$props2['aria-describedby'],
-        autoFocus = _this$props2.autoFocus,
-        formatDisplayLabel = _this$props2.formatDisplayLabel,
-        hideIcon = _this$props2.hideIcon,
-        id = _this$props2.id,
-        innerProps = _this$props2.innerProps,
-        isDisabled = _this$props2.isDisabled,
-        label = _this$props2.label,
-        locale = _this$props2.locale,
-        name = _this$props2.name,
-        placeholder = _this$props2.placeholder,
-        selectProps = _this$props2.selectProps,
-        spacing = _this$props2.spacing,
-        testId = _this$props2.testId,
-        isInvalid = _this$props2.isInvalid,
-        timeIsEditable = _this$props2.timeIsEditable,
-        timeFormat = _this$props2.timeFormat,
-        times = _this$props2.times;
-      var ICON_PADDING = 2;
-      var l10n = (0, _locale.createLocalizationProvider)(locale);
-      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);
-      var SelectComponent = timeIsEditable ? _select.CreatableSelect : _select.default;
 
-      /**
-       * There are multiple props that can change how the time is formatted.
-       * The priority of props used is:
-       *   1. formatDisplayLabel
-       *   2. timeFormat
-       *   3. locale
-       */
-      var formatTime = function formatTime(time) {
-        if (formatDisplayLabel) {
-          return formatDisplayLabel(time, timeFormat || _internal.defaultTimeFormat);
-        }
-        var date = (0, _parseTime.default)(time);
-        if (!(date instanceof Date)) {
-          return '';
-        }
-        if (!(0, _dateFns.isValid)(date)) {
-          return time;
-        }
-        if (timeFormat) {
-          return (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(timeFormat));
-        }
-        return l10n.formatTime(date);
-      };
-      var options = times.map(function (time) {
-        return {
-          label: formatTime(time),
-          value: time
-        };
-      });
-      var initialValue = value ? {
-        label: formatTime(value),
-        value: value
-      } : null;
-      var SingleValue = (0, _singleValue.makeSingleValue)({
-        lang: this.props.locale
-      });
-      var selectComponents = _objectSpread({
-        DropdownIndicator: _internal.EmptyComponent,
-        Menu: _fixedLayerMenu.FixedLayerMenu,
-        SingleValue: SingleValue
-      }, hideIcon && {
-        ClearIndicator: _internal.EmptyComponent
-      });
-      var renderIconContainer = Boolean(!hideIcon && value);
-      var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
-        control: function control(base) {
-          return _objectSpread({}, base);
-        },
-        menu: function menu(base) {
-          return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
-            // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
-            // menu width to the width of our container
-            width: _this2.containerRef ? _this2.containerRef.getBoundingClientRect().width : 'auto'
-          });
-        },
-        indicatorsContainer: function indicatorsContainer(base) {
-          return _objectSpread(_objectSpread({}, base), {}, {
-            paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-            paddingRight: renderIconContainer ? (0, _constants.gridSize)() - ICON_PADDING : 0
-          });
-        }
-      });
-      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)({
-        "aria-describedby": ariaDescribedBy,
-        "aria-label": label || undefined,
-        appearance: appearance,
-        autoFocus: autoFocus,
-        components: selectComponents,
-        inputId: id,
-        isClearable: true,
-        isDisabled: isDisabled,
-        menuIsOpen: isOpen && !isDisabled,
-        menuPlacement: "auto",
-        openMenuOnFocus: true,
-        onBlur: this.onBlur,
-        onCreateOption: this.onCreateOption,
-        onChange: this.onChange,
-        options: options,
-        onFocus: this.onFocus,
-        onMenuOpen: this.onMenuOpen,
-        onMenuClose: this.onMenuClose,
-        placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
-        styles: mergedStyles,
-        value: initialValue,
-        spacing: spacing,
-        fixedLayerRef: this.containerRef,
-        isInvalid: isInvalid,
-        testId: testId
-      }, otherSelectProps)));
-    }
-  }]);
-  return TimePickerComponent;
-}(_react.default.Component);
-(0, _defineProperty2.default)(TimePickerComponent, "defaultProps", timePickerDefaultProps);
 /**
  * __Time picker__
  *
@@ -342,19 +53,280 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-var TimePicker = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'timePicker',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)({
-  onChange: (0, _analyticsNext.createAndFireEvent)('atlaskit')({
+var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var ariaDescribedBy = _ref['aria-describedby'],
+    analyticsContext = _ref.analyticsContext,
+    _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$defaultIsOpen = _ref.defaultIsOpen,
+    defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    formatDisplayLabel = _ref.formatDisplayLabel,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    _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,
+    providedIsOpen = _ref.isOpen,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    providedOnBlur = _ref$onBlur === void 0 ? _noop.default : _ref$onBlur,
+    _ref$onChange = _ref.onChange,
+    providedOnChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
+    _ref$onFocus = _ref.onFocus,
+    providedOnFocus = _ref$onFocus === void 0 ? _noop.default : _ref$onFocus,
+    _ref$parseInputValue = _ref.parseInputValue,
+    parseInputValue = _ref$parseInputValue === void 0 ? function (time, _timeFormat) {
+      return (0, _parseTime.default)(time);
+    } : _ref$parseInputValue,
+    placeholder = _ref.placeholder,
+    _ref$selectProps = _ref.selectProps,
+    selectProps = _ref$selectProps === void 0 ? {} : _ref$selectProps,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    testId = _ref.testId,
+    timeFormat = _ref.timeFormat,
+    _ref$timeIsEditable = _ref.timeIsEditable,
+    timeIsEditable = _ref$timeIsEditable === void 0 ? false : _ref$timeIsEditable,
+    _ref$times = _ref.times,
+    times = _ref$times === void 0 ? _internal.defaultTimes : _ref$times,
+    providedValue = _ref.value;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    containerRef = _useState2[0],
+    setContainerRef = _useState2[1];
+  /**
+   * When being cleared from the icon the TimePicker is blurred.
+   * This variable defines whether the default onMenuOpen or onMenuClose
+   * events should behave as normal
+   */
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    clearingFromIcon = _useState4[0],
+    setClearingFromIcon = _useState4[1];
+  // TODO: Remove isFocused? Does it do anything?
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    _ = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = (0, _react.useState)(providedIsOpen || defaultIsOpen),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isOpen = _useState8[0],
+    setIsOpen = _useState8[1];
+  var _useState9 = (0, _react.useState)(providedValue || defaultValue),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    value = _useState10[0],
+    setValue = _useState10[1];
+
+  // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+  var _useReducer = (0, _react.useReducer)(function (x) {
+      return x + 1;
+    }, 0),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    forceUpdate = _useReducer2[1];
+  var providedOnChangeWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+    fn: providedOnChange,
     action: 'selectedTime',
-    actionSubject: 'timePicker',
-    attributes: {
-      componentName: 'timePicker',
-      packageName: packageName,
-      packageVersion: packageVersion
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var onChange = function onChange(newValue, action) {
+    var rawValue = newValue ? newValue.value || newValue : '';
+    var finalValue = rawValue.toString();
+    setValue(finalValue);
+    if (action && action.action === 'clear') {
+      setClearingFromIcon(true);
+    }
+    providedOnChangeWithAnalytics(finalValue);
+  };
+
+  /**
+   * Only allow custom times if timeIsEditable prop is true
+   */
+  var onCreateOption = function onCreateOption(inputValue) {
+    if (timeIsEditable) {
+      var sanitizedInput;
+      try {
+        sanitizedInput = parseInputValue(inputValue, timeFormat || _internal.defaultTimeFormat);
+      } catch (e) {
+        return; // do nothing, the main validation should happen in the form
+      }
+      var includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
+      var formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
+      var formattedValue = (0, _dateFns.format)(sanitizedInput, formatFormat) || '';
+      setValue(formattedValue);
+      providedOnChange(formattedValue);
+    } else {
+      providedOnChange(inputValue);
     }
-  })
-})(TimePickerComponent));
+  };
+  var onMenuOpen = function onMenuOpen() {
+    // Don't open menu after the user has clicked clear
+    if (clearingFromIcon) {
+      setClearingFromIcon(false);
+    } else {
+      setIsOpen(true);
+    }
+  };
+  var onMenuClose = function onMenuClose() {
+    // Don't close menu after the user has clicked clear
+    if (clearingFromIcon) {
+      setClearingFromIcon(false);
+    } else {
+      setIsOpen(false);
+    }
+  };
+  var setInternalContainerRef = function setInternalContainerRef(ref) {
+    var oldRef = containerRef;
+    setContainerRef(ref);
+    // Cause a re-render if we're getting the container ref for the first time
+    // as the layered menu requires it for dimension calculation
+    if (oldRef === null && ref !== null) {
+      forceUpdate();
+    }
+  };
+  var onBlur = function onBlur(event) {
+    setIsFocused(false);
+    providedOnBlur(event);
+  };
+  var onFocus = function onFocus(event) {
+    setIsFocused(true);
+    providedOnFocus(event);
+  };
+  var onSelectKeyDown = function onSelectKeyDown(event) {
+    var key = event.key;
+    var keyPressed = key.toLowerCase();
+    if (clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
+      // If being cleared from keyboard, don't change behaviour
+      setClearingFromIcon(false);
+    }
+  };
+  var ICON_PADDING = 2;
+  var l10n = (0, _locale.createLocalizationProvider)(locale);
+  var _selectProps$styles = selectProps.styles,
+    selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
+    otherSelectProps = (0, _objectWithoutProperties2.default)(selectProps, _excluded);
+  var SelectComponent = timeIsEditable ? _select.CreatableSelect : _select.default;
+
+  /**
+   * There are multiple props that can change how the time is formatted.
+   * The priority of props used is:
+   *   1. formatDisplayLabel
+   *   2. timeFormat
+   *   3. locale
+   */
+  var formatTime = function formatTime(time) {
+    if (formatDisplayLabel) {
+      return formatDisplayLabel(time, timeFormat || _internal.defaultTimeFormat);
+    }
+    var date = (0, _parseTime.default)(time);
+    if (!(date instanceof Date)) {
+      return '';
+    }
+    if (!(0, _dateFns.isValid)(date)) {
+      return time;
+    }
+    if (timeFormat) {
+      return (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(timeFormat));
+    }
+    return l10n.formatTime(date);
+  };
+  var options = times.map(function (time) {
+    return {
+      label: formatTime(time),
+      value: time
+    };
+  });
+  var initialValue;
+  if (providedValue !== null && providedValue !== undefined && providedValue !== '') {
+    initialValue = {
+      label: formatTime(providedValue),
+      value: providedValue
+    };
+  } else if (providedValue !== '' && value) {
+    initialValue = {
+      label: formatTime(value),
+      value: value
+    };
+  } else {
+    initialValue = null;
+  }
+  var SingleValue = (0, _singleValue.makeSingleValue)({
+    lang: locale
+  });
+  var selectComponents = _objectSpread({
+    DropdownIndicator: _internal.EmptyComponent,
+    Menu: _fixedLayerMenu.FixedLayerMenu,
+    SingleValue: SingleValue
+  }, hideIcon && {
+    ClearIndicator: _internal.EmptyComponent
+  });
+  var renderIconContainer = Boolean(!hideIcon && value);
+  var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
+    control: function control(base) {
+      return _objectSpread({}, base);
+    },
+    menu: function menu(base) {
+      return _objectSpread(_objectSpread(_objectSpread({}, base), menuStyles), {}, {
+        // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
+        // menu width to the width of our container
+        width: containerRef ? containerRef.getBoundingClientRect().width : 'auto'
+      });
+    },
+    indicatorsContainer: function indicatorsContainer(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        paddingLeft: renderIconContainer ? ICON_PADDING : 0,
+        paddingRight: renderIconContainer ? (0, _constants.gridSize)() - ICON_PADDING : 0
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, innerProps, {
+    ref: setInternalContainerRef,
+    "data-testid": testId && "".concat(testId, "--container")
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: value,
+    "data-testid": testId && "".concat(testId, "--input"),
+    onKeyDown: onSelectKeyDown
+  }), /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": label || undefined,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    components: selectComponents,
+    inputId: id,
+    isClearable: true,
+    isDisabled: isDisabled,
+    menuIsOpen: isOpen && !isDisabled,
+    menuPlacement: "auto",
+    openMenuOnFocus: true,
+    onBlur: onBlur,
+    onCreateOption: onCreateOption,
+    onChange: onChange,
+    options: options,
+    onFocus: onFocus,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
+    styles: mergedStyles,
+    value: initialValue,
+    spacing: spacing,
+    fixedLayerRef: containerRef,
+    isInvalid: isInvalid,
+    testId: testId
+  }, otherSelectProps)));
+});
 var _default = exports.default = TimePicker;

package/dist/cjs/internal/menu.js

@@ -72,7 +72,6 @@ var Menu = exports.Menu = function Menu(_ref) {
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
       previousMonthLabel: selectProps.previousMonthLabel,
-      calendarRef: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,

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

@@ -19,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 = "14.0.1";
+const packageVersion = "14.0.3";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -51,7 +51,6 @@ const datePickerDefaultProps = {
 class DatePickerComponent extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "calendarRef", null);
     _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.
@@ -284,9 +283,6 @@ class DatePickerComponent extends Component {
         this.onClear();
       }
     });
-    _defineProperty(this, "refCalendar", ref => {
-      this.calendarRef = ref;
-    });
     _defineProperty(this, "handleSelectInputChange", (selectInputValue, actionMeta) => {
       const {
         onInputChange
@@ -436,7 +432,6 @@ class DatePickerComponent extends Component {
     } : {};
     const calendarProps = {
       calendarContainerRef: this.containerRef,
-      calendarRef: this.refCalendar,
       calendarDisabled: disabled,
       calendarDisabledDateFilter: disabledDateFilter,
       calendarMaxDate: maxDate,
@@ -516,7 +511,6 @@ class DatePickerComponent extends Component {
         calendarLocale: calendarProps.calendarLocale,
         calendarMaxDate: calendarProps.calendarMaxDate,
         calendarMinDate: calendarProps.calendarMinDate,
-        calendarRef: calendarProps.calendarRef,
         calendarValue: calendarProps.calendarValue,
         calendarView: calendarProps.calendarView,
         calendarWeekStartDay: calendarProps.calendarWeekStartDay,