@atlaskit/datetime-picker 14.0.1 → 14.0.3

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

@@ -1,22 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["styles"];
 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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
+import React, { forwardRef, useReducer, useState } from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import { format, isValid } from 'date-fns';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -27,7 +21,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 = "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',
@@ -36,296 +30,11 @@ 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 parseTime(time);
-  },
-  selectProps: {},
-  spacing: 'default',
-  times: 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 = /*#__PURE__*/function (_React$Component) {
-  _inherits(TimePickerComponent, _React$Component);
-  var _super = _createSuper(TimePickerComponent);
-  function TimePickerComponent() {
-    var _this;
-    _classCallCheck(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));
-    _defineProperty(_assertThisInitialized(_this), "containerRef", null);
-    _defineProperty(_assertThisInitialized(_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.
-    _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 : '';
-      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
-     */
-    _defineProperty(_assertThisInitialized(_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 || 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 = format(sanitizedInput, formatFormat) || '';
-        _this.setState({
-          value: formattedValue
-        });
-        _this.props.onChange(formattedValue);
-      } else {
-        _this.onChange(inputValue);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_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
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_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
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_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();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
-      _this.setState({
-        isFocused: false
-      });
-      _this.props.onBlur(event);
-    });
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
-      _this.setState({
-        isFocused: true
-      });
-      _this.props.onFocus(event);
-    });
-    _defineProperty(_assertThisInitialized(_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;
-  }
-  _createClass(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 = createLocalizationProvider(locale);
-      var value = this.getValue() || '';
-      var isOpen = this.getIsOpen();
-      var _selectProps$styles = selectProps.styles,
-        selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
-        otherSelectProps = _objectWithoutProperties(selectProps, _excluded);
-      var SelectComponent = timeIsEditable ? CreatableSelect : Select;
-
-      /**
-       * 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 || defaultTimeFormat);
-        }
-        var date = parseTime(time);
-        if (!(date instanceof Date)) {
-          return '';
-        }
-        if (!isValid(date)) {
-          return time;
-        }
-        if (timeFormat) {
-          return format(date, 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 = makeSingleValue({
-        lang: this.props.locale
-      });
-      var selectComponents = _objectSpread({
-        DropdownIndicator: EmptyComponent,
-        Menu: FixedLayerMenu,
-        SingleValue: SingleValue
-      }, hideIcon && {
-        ClearIndicator: EmptyComponent
-      });
-      var renderIconContainer = Boolean(!hideIcon && value);
-      var mergedStyles = 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 ? gridSize() - ICON_PADDING : 0
-          });
-        }
-      });
-      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({
-        "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(placeholderDatetime),
-        styles: mergedStyles,
-        value: initialValue,
-        spacing: spacing,
-        fixedLayerRef: this.containerRef,
-        isInvalid: isInvalid,
-        testId: testId
-      }, otherSelectProps)));
-    }
-  }]);
-  return TimePickerComponent;
-}(React.Component);
-_defineProperty(TimePickerComponent, "defaultProps", timePickerDefaultProps);
-export { TimePickerComponent as TimePickerWithoutAnalytics };
 
 /**
  * __Time picker__
@@ -336,19 +45,280 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-var TimePicker = withAnalyticsContext({
-  componentName: 'timePicker',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents({
-  onChange: createAndFireEvent('atlaskit')({
+var TimePicker = /*#__PURE__*/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 : _ref$onBlur,
+    _ref$onChange = _ref.onChange,
+    providedOnChange = _ref$onChange === void 0 ? __noop : _ref$onChange,
+    _ref$onFocus = _ref.onFocus,
+    providedOnFocus = _ref$onFocus === void 0 ? __noop : _ref$onFocus,
+    _ref$parseInputValue = _ref.parseInputValue,
+    parseInputValue = _ref$parseInputValue === void 0 ? function (time, _timeFormat) {
+      return parseTime(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 ? defaultTimes : _ref$times,
+    providedValue = _ref.value;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_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 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    clearingFromIcon = _useState4[0],
+    setClearingFromIcon = _useState4[1];
+  // TODO: Remove isFocused? Does it do anything?
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _ = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = useState(providedIsOpen || defaultIsOpen),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isOpen = _useState8[0],
+    setIsOpen = _useState8[1];
+  var _useState9 = useState(providedValue || defaultValue),
+    _useState10 = _slicedToArray(_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 = useReducer(function (x) {
+      return x + 1;
+    }, 0),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    forceUpdate = _useReducer2[1];
+  var providedOnChangeWithAnalytics = 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 || 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 = format(sanitizedInput, formatFormat) || '';
+      setValue(formattedValue);
+      providedOnChange(formattedValue);
+    } else {
+      providedOnChange(inputValue);
+    }
+  };
+  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 = createLocalizationProvider(locale);
+  var _selectProps$styles = selectProps.styles,
+    selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles,
+    otherSelectProps = _objectWithoutProperties(selectProps, _excluded);
+  var SelectComponent = timeIsEditable ? CreatableSelect : Select;
+
+  /**
+   * 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 || defaultTimeFormat);
+    }
+    var date = parseTime(time);
+    if (!(date instanceof Date)) {
+      return '';
+    }
+    if (!isValid(date)) {
+      return time;
+    }
+    if (timeFormat) {
+      return format(date, 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 = makeSingleValue({
+    lang: locale
+  });
+  var selectComponents = _objectSpread({
+    DropdownIndicator: EmptyComponent,
+    Menu: FixedLayerMenu,
+    SingleValue: SingleValue
+  }, hideIcon && {
+    ClearIndicator: EmptyComponent
+  });
+  var renderIconContainer = Boolean(!hideIcon && value);
+  var mergedStyles = 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 ? gridSize() - ICON_PADDING : 0
+      });
     }
-  })
-})(TimePickerComponent));
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    ref: setInternalContainerRef,
+    "data-testid": testId && "".concat(testId, "--container")
+  }), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: value,
+    "data-testid": testId && "".concat(testId, "--input"),
+    onKeyDown: onSelectKeyDown
+  }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+    "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(placeholderDatetime),
+    styles: mergedStyles,
+    value: initialValue,
+    spacing: spacing,
+    fixedLayerRef: containerRef,
+    isInvalid: isInvalid,
+    testId: testId
+  }, otherSelectProps)));
+});
 export default TimePicker;

package/dist/esm/internal/menu.js

@@ -65,7 +65,6 @@ export var 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/types/components/date-picker.d.ts

@@ -4,7 +4,6 @@
  */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { type CalendarRef } from '@atlaskit/calendar';
 import { type LocalizationProvider } from '@atlaskit/locale';
 import { type ActionMeta, type DropdownIndicatorProps, type GroupType, type InputActionMeta, type OptionType } from '@atlaskit/select';
 import { type Appearance, type DatePickerBaseProps, type Spacing } from '../types';
@@ -70,7 +69,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
         spacing: Spacing;
         locale: string;
     };
-    calendarRef: CalendarRef | null;
     containerRef: HTMLElement | null;
     constructor(props: any);
     static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
@@ -95,7 +93,6 @@ declare class DatePickerComponent extends Component<DatePickerProps, State> {
     onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClear: () => void;
     onSelectChange: (_value: unknown, action: ActionMeta) => void;
-    refCalendar: (ref: CalendarRef | null) => void;
     handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
     /**