@atlaskit/datetime-picker 15.12.2 → 15.13.0

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

@@ -1,685 +0,0 @@
-"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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _dateFns = require("date-fns");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _new = require("@atlaskit/button/new");
-var _useId = require("@atlaskit/ds-lib/use-id");
-var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
-var _locale = require("@atlaskit/locale");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _internal = require("../internal");
-var _datePickerMigration = require("../internal/date-picker-migration");
-var _indicatorsContainer = require("../internal/indicators-container");
-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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, 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
-var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.12.2";
-var dropdownIndicatorStyles = (0, _primitives.xcss)({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-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, _primitives.xcss)({
-  display: 'flex',
-  height: '100%',
-  position: 'absolute',
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  color: 'color.text.subtlest',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  transition: "color 150ms",
-  ':hover': {
-    color: 'color.text.subtle'
-  }
-});
-var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.400'
-});
-var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.050'
-});
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
-  function DatePickerComponent(props) {
-    var _this$props$selectPro2;
-    var _this;
-    (0, _classCallCheck2.default)(this, DatePickerComponent);
-    _this = _callSuper(this, DatePickerComponent, [props]);
-    (0, _defineProperty2.default)(_this, "containerRef", null);
-    (0, _defineProperty2.default)(_this, "calendarRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.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)(_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)(_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)(_this, "onCalendarChange", function (_ref) {
-      var iso = _ref.iso;
-      _this.setState({
-        calendarValue: (0, _datePickerMigration.getParsedISO)({
-          iso: iso
-        })
-      });
-    });
-    (0, _defineProperty2.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)(_this, "onInputClick", function () {
-      if (!_this.props.isDisabled && !_this.getIsOpen()) {
-        _this.setState({
-          isOpen: true,
-          wasOpenedFromCalendarButton: false
-        });
-      }
-    });
-    (0, _defineProperty2.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)(_this, "onContainerFocus", function () {
-      _this.setState({
-        shouldSetFocusOnCurrentDay: false
-      });
-    });
-    (0, _defineProperty2.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)(_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)(_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)(_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.shouldSetFocusOnCurrentDay) {
-            _this.setState({
-              isOpen: true,
-              shouldSetFocusOnCurrentDay: true
-            });
-          }
-          break;
-        default:
-          break;
-      }
-    });
-    (0, _defineProperty2.default)(_this, "onCalendarButtonKeyDown", function (e) {
-      // Don't allow an arrow up or down to open the menu, since the input key
-      // down handler is actually on the parent.
-      if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-        e.stopPropagation();
-      }
-      // 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)(_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)(_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)(_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)(_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)(_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, _inherits2.default)(DatePickerComponent, _Component);
-  return (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$clearCont = _this$props.clearControlLabel,
-        clearControlLabel = _this$props$clearCont === void 0 ? 'Clear' : _this$props$clearCont,
-        _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 clearIndicator = Icon;
-
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
-        clearIndicator = function clearIndicator(props) {
-          return (0, _react2.jsx)(_primitives.Box, {
-            xcss: dropdownIndicatorStyles
-          }, (0, _react2.jsx)(Icon, props));
-        };
-      }
-      var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
-      var SingleValue = (0, _singleValue.makeSingleValue)({
-        lang: this.props.locale
-      });
-      var selectComponents = _objectSpread(_objectSpread({
-        DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
-      }, shouldShowCalendarButton ? {
-        IndicatorsContainer: function IndicatorsContainer(props) {
-          return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
-            showClearIndicator: showClearIndicator
-          }));
-        }
-      } : {}), {}, {
-        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.
-        // Until innerProps is removed, it must remain a div rather than a primitive component.
-        (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
-          css: pickerContainerStyles
-          // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
-          ,
-          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,
-          label: label || undefined,
-          autoFocus: autoFocus,
-          clearControlLabel: clearControlLabel,
-          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)(_useId.IdProvider, {
-          prefix: "open-calendar-label--"
-        }, function (_ref3) {
-          var openCalendarLabelId = _ref3.id;
-          return (0, _react2.jsx)(_primitives.Box, {
-            xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
-          }, (0, _react2.jsx)(_new.IconButton, {
-            appearance: "subtle",
-            label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-            "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
-            id: openCalendarLabelId,
-            icon: function icon(iconProps) {
-              return (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, iconProps, {
-                color: "var(--ds-icon, #44546F)"
-              }));
-            },
-            onClick: _this2.onCalendarButtonClick,
-            onKeyDown: _this2.onCalendarButtonKeyDown,
-            ref: _this2.calendarButtonRef,
-            testId: testId && "".concat(testId, "--open-calendar-button")
-          }));
-        }) : 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;
-      }
-    }
-  }]);
-}(_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;