@atlaskit/datetime-picker 15.3.1 → 15.4.1

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

@@ -17,12 +17,14 @@ var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
 var _parseTokens = require("../internal/parse-tokens");
-var _datePicker = _interopRequireDefault(require("./date-picker"));
+var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
+var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
 var _timePicker = _interopRequireDefault(require("./time-picker"));
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -31,8 +33,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var DatePicker = (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component') ? _datePickerFc.default : _datePickerClass.default;
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.3.1";
+var packageVersion = "15.4.1";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -323,7 +326,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         "data-testid": testId && "".concat(testId, "--input")
       }), (0, _react2.jsx)("div", {
         css: datePickerContainerStyles
-      }, (0, _react2.jsx)(_datePicker.default, {
+      }, (0, _react2.jsx)(DatePicker, {
         appearance: appearance,
         "aria-describedby": datePickerAriaDescribedBy,
         autoFocus: datePickerProps.autoFocus || autoFocus,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.3.1";
+var packageVersion = "15.4.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

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

@@ -0,0 +1,631 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Component, createRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { isValid, parseISO } from 'date-fns';
+// This is a deprecated component but we will be able to use the actual hook
+// version very soon from converting this to functional. And also React 18 is on
+// the horizon
+import { UID } from 'react-uid';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import CalendarIcon from '@atlaskit/icon/glyph/calendar';
+import { createLocalizationProvider } from '@atlaskit/locale';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import Select, { mergeStyles } from '@atlaskit/select';
+import { N500, N70 } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { EmptyComponent } from '../internal';
+import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
+import { Menu } from '../internal/menu';
+import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
+import { makeSingleValue } from '../internal/single-value';
+const packageName = "@atlaskit/datetime-picker";
+const packageVersion = "15.4.1";
+const datePickerDefaultProps = {
+  defaultIsOpen: false,
+  defaultValue: '',
+  disabled: [],
+  disabledDateFilter: _ => false,
+  locale: 'en-US',
+  // 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: _event => {},
+  onChange: _value => {},
+  onFocus: _event => {}
+  /* eslint-enable @repo/internal/react/use-noop */
+  // Not including a default prop for value as it will
+  // Make the component a controlled component
+};
+const pickerContainerStyles = css({
+  position: 'relative'
+});
+const iconContainerStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'absolute',
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: `var(--ds-text-subtlest, ${N70})`,
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  transition: `color 150ms`,
+  '&:hover': {
+    color: `var(--ds-text-subtle, ${N500})`
+  }
+});
+const iconSpacingWithClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-400, 2rem)"
+});
+const iconSpacingWithoutClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+});
+const calendarButtonStyles = xcss({
+  borderRadius: 'border.radius',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class DatePickerComponent extends Component {
+  constructor(props) {
+    var _this$props$selectPro2;
+    super(props);
+    _defineProperty(this, "containerRef", null);
+    _defineProperty(this, "calendarRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "calendarButtonRef", /*#__PURE__*/createRef());
+    // 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, "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, "onCalendarChange", ({
+      iso
+    }) => {
+      this.setState({
+        calendarValue: getParsedISO({
+          iso
+        })
+      });
+    });
+    _defineProperty(this, "onCalendarSelect", ({
+      iso
+    }) => {
+      this.setState({
+        selectInputValue: '',
+        isOpen: false,
+        calendarValue: iso,
+        value: iso,
+        wasOpenedFromCalendarButton: false
+      });
+      this.props.onChange(iso);
+
+      // Yes, this is not ideal. The alternative is to be able to place a ref
+      // on the inner input of Select itself, which would require a lot of
+      // extra stuff in the Select component for only this one thing. While
+      // this would be more "React-y", it doesn't seem to pose any other
+      // benefits. Performance-wise, we are only searching within the
+      // container, so it's quick.
+      if (this.state.wasOpenedFromCalendarButton) {
+        var _this$calendarButtonR;
+        (_this$calendarButtonR = this.calendarButtonRef.current) === null || _this$calendarButtonR === void 0 ? void 0 : _this$calendarButtonR.focus();
+      } else {
+        var _this$containerRef;
+        const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+      }
+      this.setState({
+        isOpen: false
+      });
+    });
+    _defineProperty(this, "onInputClick", () => {
+      if (!this.props.isDisabled && !this.getIsOpen()) {
+        this.setState({
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
+        });
+      }
+    });
+    _defineProperty(this, "onContainerBlur", event => {
+      var _this$containerRef2;
+      const newlyFocusedElement = event.relatedTarget;
+      if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
+        this.setState({
+          isOpen: false,
+          shouldSetFocusOnCurrentDay: false,
+          wasOpenedFromCalendarButton: false
+        });
+        this.props.onBlur(event);
+      }
+    });
+    _defineProperty(this, "onContainerFocus", () => {
+      this.setState({
+        shouldSetFocusOnCurrentDay: false
+      });
+    });
+    _defineProperty(this, "onSelectBlur", event => {
+      var _this$containerRef3;
+      const newlyFocusedElement = event.relatedTarget;
+      if (this.state.clearingFromIcon) {
+        // Don't close menu if blurring after the user has clicked clear
+        this.setState({
+          clearingFromIcon: false
+        });
+      } else if (!((_this$containerRef3 = this.containerRef) !== null && _this$containerRef3 !== void 0 && _this$containerRef3.contains(newlyFocusedElement))) {
+        // Don't close menu if focus is staying within the date picker's
+        // container. Makes keyboard accessibility of calendar possible
+        this.setState({
+          isOpen: false,
+          isFocused: false,
+          wasOpenedFromCalendarButton: false
+        });
+      }
+    });
+    _defineProperty(this, "onSelectFocus", event => {
+      const {
+        clearingFromIcon
+      } = this.state;
+      const value = this.getValue();
+      if (clearingFromIcon) {
+        // Don't open menu if focussing after the user has clicked clear
+        this.setState({
+          clearingFromIcon: false
+        });
+      } else {
+        this.setState({
+          // Don't open when focused into via keyboard if the calendar button is present
+          isOpen: !this.props.shouldShowCalendarButton,
+          calendarValue: value,
+          isFocused: true,
+          wasOpenedFromCalendarButton: false
+        });
+      }
+      this.props.onFocus(event);
+    });
+    _defineProperty(this, "onTextInput", event => {
+      const inputValue = event.target.value;
+      if (inputValue) {
+        const parsed = parseDate(inputValue, {
+          parseInputValue: this.props.parseInputValue,
+          dateFormat: this.props.dateFormat,
+          l10n: this.state.l10n
+        });
+        // Only try to set the date if we have month & day
+        if (parsed && isValid(parsed)) {
+          // We format the parsed date to YYYY-MM-DD here because
+          // this is the format expected by the @atlaskit/calendar component
+          this.setState({
+            calendarValue: getShortISOString(parsed)
+          });
+        }
+      }
+      this.setState({
+        isOpen: true,
+        wasOpenedFromCalendarButton: false
+      });
+    });
+    _defineProperty(this, "onInputKeyDown", event => {
+      const {
+        calendarValue
+      } = 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
+      if (!this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+        this.setState({
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
+        });
+      }
+      switch (keyPressed) {
+        case 'escape':
+          // Yes, this is not ideal. The alternative is to be able to place a ref
+          // on the inner input of Select itself, which would require a lot of
+          // extra stuff in the Select component for only this one thing. While
+          // this would be more "React-y", it doesn't seem to pose any other
+          // benefits. Performance-wise, we are only searching within the
+          // container, so it's quick.
+          if (this.state.wasOpenedFromCalendarButton) {
+            var _this$calendarButtonR2;
+            (_this$calendarButtonR2 = this.calendarButtonRef.current) === null || _this$calendarButtonR2 === void 0 ? void 0 : _this$calendarButtonR2.focus();
+          } else {
+            var _this$containerRef4;
+            const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
+            innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+          }
+          this.setState({
+            isOpen: false,
+            shouldSetFocusOnCurrentDay: false,
+            wasOpenedFromCalendarButton: false
+          });
+          break;
+        case 'backspace':
+        case 'delete':
+          {
+            const inputCount = 0;
+            if (value && event.target instanceof HTMLInputElement && event.target.value.length <= inputCount) {
+              // If being cleared from keyboard, don't change behaviour
+              this.setState({
+                clearingFromIcon: false,
+                value: ''
+              });
+            }
+            break;
+          }
+        case 'enter':
+          if (!this.state.isOpen) {
+            return;
+          }
+          // Prevent form submission when a date is selected
+          // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
+          // for more details.
+          event.preventDefault();
+          if (!isDateDisabled(calendarValue, {
+            disabled: this.props.disabled
+          })) {
+            // Get a safe `calendarValue` in case the value exceeds the maximum
+            // allowed by ISO 8601
+            const safeCalendarValue = getSafeCalendarValue(calendarValue);
+            const valueChanged = safeCalendarValue !== value;
+            this.setState({
+              selectInputValue: '',
+              isOpen: false,
+              value: safeCalendarValue,
+              calendarValue: safeCalendarValue,
+              wasOpenedFromCalendarButton: false
+            });
+            if (valueChanged) {
+              this.props.onChange(safeCalendarValue);
+            }
+          }
+          break;
+        case 'arrowdown':
+        case 'arrowup':
+          if (this.state.isOpen && !this.state.shouldSetFocusOnCurrentDay) {
+            this.setState({
+              shouldSetFocusOnCurrentDay: true
+            });
+          }
+          break;
+        default:
+          break;
+      }
+    });
+    _defineProperty(this, "onCalendarButtonKeyDown", e => {
+      // We want to stop this from triggering other keydown events, particularly
+      // for space and enter presses. Otherwise, it opens and then closes
+      // immediately.
+      if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
+        e.stopPropagation();
+        this.setState({
+          isKeyDown: true,
+          wasOpenedFromCalendarButton: true
+        });
+      }
+    });
+    // This event handler is triggered from both keydown and click. It's weird.
+    _defineProperty(this, "onCalendarButtonClick", e => {
+      this.setState({
+        isOpen: !this.state.isOpen,
+        wasOpenedFromCalendarButton: true
+      }, () => {
+        var _this$calendarRef, _this$calendarRef$cur, _this$calendarRef$cur2;
+        // We don't want the focus to move if this is a click event
+        if (!this.state.isKeyDown) {
+          return;
+        }
+        this.setState({
+          isKeyDown: false
+        });
+
+        // Focus on the first button within the calendar
+        (_this$calendarRef = this.calendarRef) === null || _this$calendarRef === void 0 ? void 0 : (_this$calendarRef$cur = _this$calendarRef.current) === null || _this$calendarRef$cur === void 0 ? void 0 : (_this$calendarRef$cur2 = _this$calendarRef$cur.querySelector('button')) === null || _this$calendarRef$cur2 === void 0 ? void 0 : _this$calendarRef$cur2.focus();
+      });
+      e.stopPropagation();
+    });
+    _defineProperty(this, "onClear", () => {
+      let changedState = {
+        value: '',
+        calendarValue: this.props.defaultValue || getShortISOString(new Date())
+      };
+      if (!this.props.hideIcon) {
+        changedState = {
+          ...changedState,
+          clearingFromIcon: true
+        };
+      }
+      this.setState(changedState);
+      this.props.onChange('');
+    });
+    // `unknown` is used because `value` is unused so it does not matter.
+    _defineProperty(this, "onSelectChange", (_value, action) => {
+      // Used for native clear event in React Select
+      // Triggered when clicking ClearIndicator or backspace with no value
+      if (action.action === 'clear') {
+        this.onClear();
+      }
+    });
+    _defineProperty(this, "handleSelectInputChange", (selectInputValue, actionMeta) => {
+      var _this$props$selectPro;
+      const onInputChange = (_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.onInputChange;
+      if (onInputChange) {
+        onInputChange(selectInputValue, actionMeta);
+      }
+      this.setState({
+        selectInputValue
+      });
+    });
+    _defineProperty(this, "getContainerRef", ref => {
+      const 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();
+      }
+    });
+    this.state = {
+      isKeyDown: false,
+      isOpen: this.props.defaultIsOpen,
+      isFocused: false,
+      clearingFromIcon: false,
+      selectInputValue: ((_this$props$selectPro2 = this.props.selectProps) === null || _this$props$selectPro2 === void 0 ? void 0 : _this$props$selectPro2.inputValue) || '',
+      value: this.props.value || this.props.defaultValue,
+      calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
+      l10n: createLocalizationProvider(this.props.locale),
+      locale: this.props.locale,
+      shouldSetFocusOnCurrentDay: false,
+      wasOpenedFromCalendarButton: false
+    };
+  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.locale !== prevState.locale) {
+      return {
+        l10n: createLocalizationProvider(nextProps.locale),
+        locale: nextProps.locale
+      };
+    } else {
+      return null;
+    }
+  }
+  render() {
+    const {
+      appearance = 'default',
+      'aria-describedby': ariaDescribedBy,
+      autoFocus = false,
+      hideIcon = false,
+      openCalendarLabel = 'Open calendar',
+      disabled,
+      disabledDateFilter,
+      icon = CalendarIcon,
+      id = '',
+      innerProps = {},
+      inputLabel = 'Date picker',
+      inputLabelId,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      label = '',
+      locale,
+      maxDate,
+      minDate,
+      name = '',
+      nextMonthLabel,
+      previousMonthLabel,
+      selectProps = {},
+      shouldShowCalendarButton,
+      spacing = 'default',
+      testId,
+      weekStartDay
+    } = this.props;
+    const {
+      calendarValue,
+      selectInputValue
+    } = this.state;
+    const value = this.getValue();
+    let actualSelectInputValue;
+    actualSelectInputValue = selectInputValue;
+    const menuIsOpen = this.getIsOpen() && !isDisabled;
+    const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
+    const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+    const SingleValue = makeSingleValue({
+      lang: this.props.locale
+    });
+    const selectComponents = {
+      DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
+      Menu,
+      SingleValue,
+      ...(!showClearIndicator && {
+        ClearIndicator: EmptyComponent
+      })
+    };
+    const {
+      styles: selectStyles = {}
+    } = selectProps;
+    const disabledStyle = isDisabled ? {
+      pointerEvents: 'none',
+      color: "var(--ds-icon-disabled, inherit)"
+    } : {};
+    const calendarProps = {
+      calendarContainerRef: this.containerRef,
+      calendarDisabled: disabled,
+      calendarDisabledDateFilter: disabledDateFilter,
+      calendarMaxDate: maxDate,
+      calendarMinDate: minDate,
+      calendarRef: this.calendarRef,
+      calendarValue: value && getShortISOString(parseISO(value)),
+      calendarView: calendarValue,
+      onCalendarChange: this.onCalendarChange,
+      onCalendarSelect: this.onCalendarSelect,
+      calendarLocale: locale,
+      calendarWeekStartDay: weekStartDay,
+      shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
+    };
+
+    // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
+    const mergedStyles = mergeStyles(selectStyles, {
+      control: base => ({
+        ...base,
+        ...disabledStyle
+      }),
+      indicatorsContainer: base => ({
+        ...base,
+        paddingLeft: "var(--ds-space-025, 2px)",
+        // ICON_PADDING = 2
+        paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
+      })
+    });
+    const initialValue = value ? {
+      label: formatDate(value, {
+        formatDisplayLabel: this.props.formatDisplayLabel,
+        dateFormat: this.props.dateFormat,
+        l10n: this.state.l10n
+      }),
+      value
+    } : null;
+
+    // `label` takes precedence of the `inputLabel`
+    const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel} , ${openCalendarLabel}` : openCalendarLabel;
+    return (
+      // These event handlers must be on this element because the events come
+      // from different child elements.
+      jsx("div", _extends({}, innerProps, {
+        css: pickerContainerStyles,
+        role: "presentation",
+        onBlur: this.onContainerBlur,
+        onFocus: this.onContainerFocus,
+        onClick: this.onInputClick,
+        onInput: this.onTextInput,
+        onKeyDown: this.onInputKeyDown,
+        ref: this.getContainerRef,
+        "data-testid": testId && `${testId}--container`
+      }), jsx("input", {
+        name: name,
+        type: "hidden",
+        value: value,
+        "data-testid": testId && `${testId}--input`
+      }), jsx(Select, _extends({
+        appearance: this.props.appearance,
+        "aria-describedby": ariaDescribedBy,
+        "aria-label": label || undefined,
+        autoFocus: autoFocus,
+        closeMenuOnSelect: true
+        // FOr some reason, this and the below `styles` type error _only_ show
+        // up when you alter some of the properties in the `selectComponents`
+        // object. These errors are still present, and I suspect have always
+        // been present, without changing the unrelated code. Ignoring as the
+        // component still works as expected despite this error. And also
+        // because the select refresh team may solve it later.
+        ,
+        components: selectComponents,
+        enableAnimation: false,
+        inputId: id,
+        inputValue: actualSelectInputValue,
+        isDisabled: isDisabled,
+        isRequired: isRequired,
+        menuIsOpen: menuIsOpen,
+        onBlur: this.onSelectBlur,
+        onChange: this.onSelectChange,
+        onFocus: this.onSelectFocus,
+        onInputChange: this.handleSelectInputChange,
+        placeholder: getPlaceholder({
+          placeholder: this.props.placeholder,
+          l10n: this.state.l10n
+        }),
+        styles: mergedStyles,
+        value: initialValue
+      }, selectProps, {
+        // These are below the spread because I don't know what is in
+        // selectProps or not and what wil be overwritten
+        isClearable: true,
+        isInvalid: isInvalid,
+        spacing: spacing,
+        testId: testId
+        // These aren't part of `Select`'s API, but we're using them here.
+        // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
+        ,
+        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
+      })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
+        name: id => `open-calendar-label--${id}`
+      }, openCalendarLabelId => jsx("div", {
+        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      }, inputLabelId && jsx(VisuallyHidden, {
+        id: openCalendarLabelId
+      }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
+        'aria-labelledby': `${inputLabelId} ${openCalendarLabelId}`
+      } : {
+        'aria-label': fullopenCalendarLabel
+      }, {
+        onClick: this.onCalendarButtonClick,
+        onKeyDown: this.onCalendarButtonKeyDown,
+        ref: this.calendarButtonRef,
+        testId: testId && `${testId}--open-calendar-button`,
+        type: "button",
+        backgroundColor: "color.background.neutral.subtle",
+        padding: "space.050",
+        xcss: calendarButtonStyles
+      }), jsx(CalendarIcon, {
+        label: "",
+        primaryColor: "var(--ds-icon, #44546F)"
+      })))) : null)
+    );
+  }
+}
+_defineProperty(DatePickerComponent, "defaultProps", datePickerDefaultProps);
+export { DatePickerComponent as DatePickerWithoutAnalytics };
+
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+const DatePicker = withAnalyticsContext({
+  componentName: 'datePicker',
+  packageName,
+  packageVersion
+})(withAnalyticsEvents({
+  onChange: createAndFireEvent('atlaskit')({
+    action: 'selectedDate',
+    actionSubject: 'datePicker',
+    attributes: {
+      componentName: 'datePicker',
+      packageName,
+      packageVersion
+    }
+  })
+})(DatePickerComponent));
+export default DatePicker;