@atlaskit/datetime-picker 15.3.1 → 15.4.1

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

@@ -0,0 +1,668 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DatePickerWithoutAnalytics = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 = require("react");
+var _react2 = require("@emotion/react");
+var _dateFns = require("date-fns");
+var _reactUid = require("react-uid");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
+var _locale = require("@atlaskit/locale");
+var _primitives = require("@atlaskit/primitives");
+var _select = _interopRequireWildcard(require("@atlaskit/select"));
+var _colors = require("@atlaskit/theme/colors");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _internal = require("../internal");
+var _datePickerMigration = require("../internal/date-picker-migration");
+var _menu = require("../internal/menu");
+var _parseDate = require("../internal/parse-date");
+var _singleValue = require("../internal/single-value");
+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 && {}.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(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; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// 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
+var packageName = "@atlaskit/datetime-picker";
+var packageVersion = "15.4.1";
+var datePickerDefaultProps = {
+  defaultIsOpen: false,
+  defaultValue: '',
+  disabled: [],
+  disabledDateFilter: function disabledDateFilter(_) {
+    return 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: function onBlur(_event) {},
+  onChange: function onChange(_value) {},
+  onFocus: function 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
+};
+var pickerContainerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var iconContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100%',
+  position: 'absolute',
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  transition: "color 150ms",
+  '&:hover': {
+    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+  }
+});
+var iconSpacingWithClearButtonStyles = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-400, 2rem)"
+});
+var iconSpacingWithoutClearButtonStyles = (0, _react2.css)({
+  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+});
+var calendarButtonStyles = (0, _primitives.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
+var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DatePickerComponent, _Component);
+  var _super = _createSuper(DatePickerComponent);
+  function DatePickerComponent(props) {
+    var _this$props$selectPro2;
+    var _this;
+    (0, _classCallCheck2.default)(this, DatePickerComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calendarRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calendarButtonRef", /*#__PURE__*/(0, _react.createRef)());
+    // 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), "onCalendarChange", function (_ref) {
+      var iso = _ref.iso;
+      _this.setState({
+        calendarValue: (0, _datePickerMigration.getParsedISO)({
+          iso: iso
+        })
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref2) {
+      var iso = _ref2.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 || _this$calendarButtonR.focus();
+      } else {
+        var _this$containerRef;
+        var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      }
+      _this.setState({
+        isOpen: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
+      if (!_this.props.isDisabled && !_this.getIsOpen()) {
+        _this.setState({
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerBlur", function (event) {
+      var _this$containerRef2;
+      var 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);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContainerFocus", function () {
+      _this.setState({
+        shouldSetFocusOnCurrentDay: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
+      var _this$containerRef3;
+      var 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
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectFocus", function (event) {
+      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({
+          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);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTextInput", function (event) {
+      var inputValue = event.target.value;
+      if (inputValue) {
+        var parsed = (0, _datePickerMigration.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 && (0, _dateFns.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: (0, _parseDate.getShortISOString)(parsed)
+          });
+        }
+      }
+      _this.setState({
+        isOpen: true,
+        wasOpenedFromCalendarButton: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
+      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
+      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 || _this$calendarButtonR2.focus();
+          } else {
+            var _this$containerRef4;
+            var innerCombobox = (_this$containerRef4 = _this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
+            innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+          }
+          _this.setState({
+            isOpen: false,
+            shouldSetFocusOnCurrentDay: false,
+            wasOpenedFromCalendarButton: false
+          });
+          break;
+        case 'backspace':
+        case 'delete':
+          {
+            var 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 (!(0, _datePickerMigration.isDateDisabled)(calendarValue, {
+            disabled: _this.props.disabled
+          })) {
+            // Get a safe `calendarValue` in case the value exceeds the maximum
+            // allowed by ISO 8601
+            var safeCalendarValue = (0, _parseDate.getSafeCalendarValue)(calendarValue);
+            var 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;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarButtonKeyDown", function (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.
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarButtonClick", function (e) {
+      _this.setState({
+        isOpen: !_this.state.isOpen,
+        wasOpenedFromCalendarButton: true
+      }, function () {
+        var _this$calendarRef;
+        // 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 || (_this$calendarRef = _this$calendarRef.current) === null || _this$calendarRef === void 0 || (_this$calendarRef = _this$calendarRef.querySelector('button')) === null || _this$calendarRef === void 0 || _this$calendarRef.focus();
+      });
+      e.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClear", function () {
+      var changedState = {
+        value: '',
+        calendarValue: _this.props.defaultValue || (0, _parseDate.getShortISOString)(new Date())
+      };
+      if (!_this.props.hideIcon) {
+        changedState = _objectSpread(_objectSpread({}, changedState), {}, {
+          clearingFromIcon: true
+        });
+      }
+      _this.setState(changedState);
+      _this.props.onChange('');
+    });
+    // `unknown` is used because `value` is unused so it does not matter.
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectChange", function (_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();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectInputChange", function (selectInputValue, actionMeta) {
+      var _this$props$selectPro;
+      var 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: selectInputValue
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerRef", 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();
+      }
+    });
+    _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 || (0, _parseDate.getShortISOString)(new Date()),
+      l10n: (0, _locale.createLocalizationProvider)(_this.props.locale),
+      locale: _this.props.locale,
+      shouldSetFocusOnCurrentDay: false,
+      wasOpenedFromCalendarButton: false
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(DatePickerComponent, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        _this$props$appearanc = _this$props.appearance,
+        appearance = _this$props$appearanc === void 0 ? 'default' : _this$props$appearanc,
+        ariaDescribedBy = _this$props['aria-describedby'],
+        _this$props$autoFocus = _this$props.autoFocus,
+        autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
+        _this$props$hideIcon = _this$props.hideIcon,
+        hideIcon = _this$props$hideIcon === void 0 ? false : _this$props$hideIcon,
+        _this$props$openCalen = _this$props.openCalendarLabel,
+        openCalendarLabel = _this$props$openCalen === void 0 ? 'Open calendar' : _this$props$openCalen,
+        disabled = _this$props.disabled,
+        disabledDateFilter = _this$props.disabledDateFilter,
+        _this$props$icon = _this$props.icon,
+        icon = _this$props$icon === void 0 ? _calendar.default : _this$props$icon,
+        _this$props$id = _this$props.id,
+        id = _this$props$id === void 0 ? '' : _this$props$id,
+        _this$props$innerProp = _this$props.innerProps,
+        innerProps = _this$props$innerProp === void 0 ? {} : _this$props$innerProp,
+        _this$props$inputLabe = _this$props.inputLabel,
+        inputLabel = _this$props$inputLabe === void 0 ? 'Date picker' : _this$props$inputLabe,
+        inputLabelId = _this$props.inputLabelId,
+        _this$props$isDisable = _this$props.isDisabled,
+        isDisabled = _this$props$isDisable === void 0 ? false : _this$props$isDisable,
+        _this$props$isInvalid = _this$props.isInvalid,
+        isInvalid = _this$props$isInvalid === void 0 ? false : _this$props$isInvalid,
+        _this$props$isRequire = _this$props.isRequired,
+        isRequired = _this$props$isRequire === void 0 ? false : _this$props$isRequire,
+        _this$props$label = _this$props.label,
+        label = _this$props$label === void 0 ? '' : _this$props$label,
+        locale = _this$props.locale,
+        maxDate = _this$props.maxDate,
+        minDate = _this$props.minDate,
+        _this$props$name = _this$props.name,
+        name = _this$props$name === void 0 ? '' : _this$props$name,
+        nextMonthLabel = _this$props.nextMonthLabel,
+        previousMonthLabel = _this$props.previousMonthLabel,
+        _this$props$selectPro3 = _this$props.selectProps,
+        selectProps = _this$props$selectPro3 === void 0 ? {} : _this$props$selectPro3,
+        shouldShowCalendarButton = _this$props.shouldShowCalendarButton,
+        _this$props$spacing = _this$props.spacing,
+        spacing = _this$props$spacing === void 0 ? 'default' : _this$props$spacing,
+        testId = _this$props.testId,
+        weekStartDay = _this$props.weekStartDay;
+      var _this$state = this.state,
+        calendarValue = _this$state.calendarValue,
+        selectInputValue = _this$state.selectInputValue;
+      var value = this.getValue();
+      var actualSelectInputValue;
+      actualSelectInputValue = selectInputValue;
+      var menuIsOpen = this.getIsOpen() && !isDisabled;
+      var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
+      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
+      var SingleValue = (0, _singleValue.makeSingleValue)({
+        lang: this.props.locale
+      });
+      var selectComponents = _objectSpread({
+        DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
+        Menu: _menu.Menu,
+        SingleValue: SingleValue
+      }, !showClearIndicator && {
+        ClearIndicator: _internal.EmptyComponent
+      });
+      var _selectProps$styles = selectProps.styles,
+        selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
+      var disabledStyle = isDisabled ? {
+        pointerEvents: 'none',
+        color: "var(--ds-icon-disabled, inherit)"
+      } : {};
+      var calendarProps = {
+        calendarContainerRef: this.containerRef,
+        calendarDisabled: disabled,
+        calendarDisabledDateFilter: disabledDateFilter,
+        calendarMaxDate: maxDate,
+        calendarMinDate: minDate,
+        calendarRef: this.calendarRef,
+        calendarValue: value && (0, _parseDate.getShortISOString)((0, _dateFns.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>>'.
+      var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
+        control: function control(base) {
+          return _objectSpread(_objectSpread({}, base), disabledStyle);
+        },
+        indicatorsContainer: function indicatorsContainer(base) {
+          return _objectSpread(_objectSpread({}, base), {}, {
+            paddingLeft: "var(--ds-space-025, 2px)",
+            // ICON_PADDING = 2
+            paddingRight: "var(--ds-space-075, 6px)" // 8 - ICON_PADDING = 6
+          });
+        }
+      });
+      var initialValue = value ? {
+        label: (0, _datePickerMigration.formatDate)(value, {
+          formatDisplayLabel: this.props.formatDisplayLabel,
+          dateFormat: this.props.dateFormat,
+          l10n: this.state.l10n
+        }),
+        value: value
+      } : null;
+
+      // `label` takes precedence of the `inputLabel`
+      var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, " , ").concat(openCalendarLabel) : openCalendarLabel;
+      return (
+        // These event handlers must be on this element because the events come
+        // from different child elements.
+        (0, _react2.jsx)("div", (0, _extends2.default)({}, 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 && "".concat(testId, "--container")
+        }), (0, _react2.jsx)("input", {
+          name: name,
+          type: "hidden",
+          value: value,
+          "data-testid": testId && "".concat(testId, "--input")
+        }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+          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: (0, _datePickerMigration.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 ? (0, _react2.jsx)(_reactUid.UID, {
+          name: function name(id) {
+            return "open-calendar-label--".concat(id);
+          }
+        }, function (openCalendarLabelId) {
+          return (0, _react2.jsx)("div", {
+            css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+          }, inputLabelId && (0, _react2.jsx)(_visuallyHidden.default, {
+            id: openCalendarLabelId
+          }, ", ", openCalendarLabel), (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({}, inputLabelId ? {
+            'aria-labelledby': "".concat(inputLabelId, " ").concat(openCalendarLabelId)
+          } : {
+            'aria-label': fullopenCalendarLabel
+          }, {
+            onClick: _this2.onCalendarButtonClick,
+            onKeyDown: _this2.onCalendarButtonKeyDown,
+            ref: _this2.calendarButtonRef,
+            testId: testId && "".concat(testId, "--open-calendar-button"),
+            type: "button",
+            backgroundColor: "color.background.neutral.subtle",
+            padding: "space.050",
+            xcss: calendarButtonStyles
+          }), (0, _react2.jsx)(_calendar.default, {
+            label: "",
+            primaryColor: "var(--ds-icon, #44546F)"
+          })));
+        }) : null)
+      );
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.locale !== prevState.locale) {
+        return {
+          l10n: (0, _locale.createLocalizationProvider)(nextProps.locale),
+          locale: nextProps.locale
+        };
+      } else {
+        return null;
+      }
+    }
+  }]);
+  return DatePickerComponent;
+}(_react.Component);
+(0, _defineProperty2.default)(DatePickerComponent, "defaultProps", datePickerDefaultProps);
+/**
+ * __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)
+ */
+var DatePicker = (0, _analyticsNext.withAnalyticsContext)({
+  componentName: 'datePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+})((0, _analyticsNext.withAnalyticsEvents)({
+  onChange: (0, _analyticsNext.createAndFireEvent)('atlaskit')({
+    action: 'selectedDate',
+    actionSubject: 'datePicker',
+    attributes: {
+      componentName: 'datePicker',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DatePickerComponent));
+var _default = exports.default = DatePicker;