@atlaskit/datetime-picker 17.4.4 → 17.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/datetime-picker
 
+## 17.5.0
+
+### Minor Changes
+
+- [`2d81fca9ecf1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d81fca9ecf1e) -
+  Clean up flag to convert date picker from a class component to a functional component.
+
+## 17.4.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.4.4
 
 ### Patch Changes

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

@@ -1,16 +1,622 @@
+/* date-picker.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _ffComponent = require("../internal/ff-component");
-var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
-var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
-var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
-  return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
-}, _datePickerFc.default, _datePickerClass.default);
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+require("./date-picker.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _dateFns = require("date-fns");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _new = require("@atlaskit/button/new");
+var _css = require("@atlaskit/css");
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _locale = require("@atlaskit/locale");
+var _compiled = require("@atlaskit/primitives/compiled");
+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");
+var _excluded = ["appearance", "autoFocus", "clearControlLabel", "hideIcon", "openCalendarLabel", "defaultIsOpen", "defaultValue", "disabled", "disabledDateFilter", "icon", "id", "innerProps", "inputLabel", "inputLabelId", "isDisabled", "isInvalid", "isRequired", "label", "name", "onBlur", "onChange", "onFocus", "selectProps", "shouldShowCalendarButton", "spacing", "locale", "value", "isOpen", "maxDate", "minDate", "weekStartDay", "formatDisplayLabel", "testId", "aria-describedby", "placeholder", "nextMonthLabel", "previousMonthLabel"]; /// <reference types="node" />
+// for typing `process`
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 = "0.0.0-development";
+var styles = {
+  pickerContainerStyle: "_kqswh2mm",
+  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
+  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz1rpy _152tze3t _rjxpze3t _30l3azsu",
+  iconSpacingWithClearButtonStyles: "_12l2xy5q",
+  iconSpacingWithoutClearButtonStyles: "_12l21b66"
+};
+var analyticsAttributes = {
+  componentName: 'datePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+};
+
+/**
+ * __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 = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwardedRef) {
+  var containerRef = (0, _react.useRef)(null);
+  var calendarRef = (0, _react.useRef)(null);
+  var calendarButtonRef = (0, _react.useRef)(null);
+  var _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'Clear' : _props$clearControlLa,
+    _props$hideIcon = props.hideIcon,
+    hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
+    _props$openCalendarLa = props.openCalendarLabel,
+    openCalendarLabel = _props$openCalendarLa === void 0 ? 'Open calendar' : _props$openCalendarLa,
+    _props$defaultIsOpen = props.defaultIsOpen,
+    defaultIsOpen = _props$defaultIsOpen === void 0 ? false : _props$defaultIsOpen,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? [] : _props$disabled,
+    _props$disabledDateFi = props.disabledDateFilter,
+    disabledDateFilter = _props$disabledDateFi === void 0 ? function (_) {
+      return false;
+    } : _props$disabledDateFi,
+    _props$icon = props.icon,
+    Icon = _props$icon === void 0 ? _calendar.default : _props$icon,
+    _props$id = props.id,
+    id = _props$id === void 0 ? '' : _props$id,
+    _props$innerProps = props.innerProps,
+    innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
+    _props$inputLabel = props.inputLabel,
+    inputLabel = _props$inputLabel === void 0 ? 'Date picker' : _props$inputLabel,
+    inputLabelId = props.inputLabelId,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isInvalid = props.isInvalid,
+    isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    _props$name = props.name,
+    name = _props$name === void 0 ? '' : _props$name,
+    _props$onBlur = props.onBlur,
+    onBlur = _props$onBlur === void 0 ? function (_event) {} : _props$onBlur,
+    _props$onChange = props.onChange,
+    onChangeProp = _props$onChange === void 0 ? function (_value) {} : _props$onChange,
+    _props$onFocus = props.onFocus,
+    onFocus = _props$onFocus === void 0 ? function (_event) {} : _props$onFocus,
+    _props$selectProps = props.selectProps,
+    selectProps = _props$selectProps === void 0 ? {} : _props$selectProps,
+    shouldShowCalendarButton = props.shouldShowCalendarButton,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
+    _props$locale = props.locale,
+    propLocale = _props$locale === void 0 ? 'en-US' : _props$locale,
+    propValue = props.value,
+    isOpenProp = props.isOpen,
+    maxDate = props.maxDate,
+    minDate = props.minDate,
+    weekStartDay = props.weekStartDay,
+    formatDisplayLabel = props.formatDisplayLabel,
+    testId = props.testId,
+    ariaDescribedBy = props['aria-describedby'],
+    placeholder = props.placeholder,
+    nextMonthLabel = props.nextMonthLabel,
+    previousMonthLabel = props.previousMonthLabel,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useState = (0, _react.useState)(defaultIsOpen),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    _ = _useState4[0],
+    setIsFocused = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    clearingFromIcon = _useState6[0],
+    setClearingFromIcon = _useState6[1];
+  var _useState7 = (0, _react.useState)(selectProps.inputValue),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    selectInputValue = _useState8[0],
+    setSelectInputValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(propValue || defaultValue),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    value = _useState0[0],
+    setValue = _useState0[1];
+  var _useState1 = (0, _react.useState)(propValue || defaultValue || (0, _parseDate.getShortISOString)(new Date())),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    calendarValue = _useState10[0],
+    setCalendarValue = _useState10[1];
+  var _useState11 = (0, _react.useState)((0, _locale.createLocalizationProvider)(propLocale)),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    l10n = _useState12[0],
+    setL10n = _useState12[1];
+  var _useState13 = (0, _react.useState)(propLocale),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    locale = _useState14[0],
+    setLocale = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    shouldSetFocusOnCurrentDay = _useState16[0],
+    setShouldSetFocusOnCurrentDay = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    isKeyDown = _useState18[0],
+    setIsKeyDown = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+    wasOpenedFromCalendarButton = _useState20[0],
+    setWasOpenedFromCalendarButton = _useState20[1];
+
+  // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+  var _useReducer = (0, _react.useReducer)(function (x) {
+      return !x;
+    }, true),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    forceUpdate = _useReducer2[1];
+  var onChangePropWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onChangeProp,
+    action: 'selectedDate',
+    actionSubject: 'datePicker'
+  }, analyticsAttributes));
+  if (propLocale !== locale) {
+    setL10n((0, _locale.createLocalizationProvider)(propLocale));
+    setLocale(propLocale);
+  }
+  (0, _react.useEffect)(function () {
+    // We don't want the focus to move if this is a click event
+    if (!isKeyDown) {
+      return;
+    }
+    if (isOpen && wasOpenedFromCalendarButton) {
+      var _calendarRef$current;
+      setIsKeyDown(false);
+      // Focus on the first button within the calendar
+      calendarRef === null || calendarRef === void 0 || (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 || (_calendarRef$current = _calendarRef$current.querySelector('button')) === null || _calendarRef$current === void 0 || _calendarRef$current.focus();
+    }
+  }, [isKeyDown, calendarRef, isOpen, wasOpenedFromCalendarButton]);
+  var getValue = function getValue() {
+    return propValue !== null && propValue !== void 0 ? propValue : value;
+  };
+  var getIsOpen = function getIsOpen() {
+    return isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : isOpen;
+  };
+  var onCalendarChange = function onCalendarChange(_ref) {
+    var iso = _ref.iso;
+    setCalendarValue((0, _datePickerMigration.getParsedISO)({
+      iso: iso
+    }));
+  };
+  var onCalendarSelect = function onCalendarSelect(_ref2) {
+    var iso = _ref2.iso;
+    setSelectInputValue('');
+    setIsOpen(false);
+    setCalendarValue(iso);
+    setValue(iso);
+    setWasOpenedFromCalendarButton(false);
+    onChangePropWithAnalytics(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 (wasOpenedFromCalendarButton) {
+      var _calendarButtonRef$cu;
+      (_calendarButtonRef$cu = calendarButtonRef.current) === null || _calendarButtonRef$cu === void 0 || _calendarButtonRef$cu.focus();
+    } else {
+      var _containerRef$current;
+      var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[role="combobox"]');
+      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+    }
+    setIsOpen(false);
+  };
+  var onInputClick = function onInputClick() {
+    if (!isDisabled && !getIsOpen()) {
+      setIsOpen(true);
+      setWasOpenedFromCalendarButton(false);
+    }
+  };
+  var onContainerBlur = function onContainerBlur(event) {
+    var _containerRef$current2;
+    var newlyFocusedElement = event.relatedTarget;
+    if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(newlyFocusedElement))) {
+      setIsOpen(false);
+      setShouldSetFocusOnCurrentDay(false);
+      setWasOpenedFromCalendarButton(false);
+      onBlur(event);
+    }
+  };
+  var onContainerFocus = function onContainerFocus() {
+    setShouldSetFocusOnCurrentDay(false);
+  };
+  var onSelectBlur = function onSelectBlur(event) {
+    var _containerRef$current3;
+    var newlyFocusedElement = event.relatedTarget;
+    if (clearingFromIcon) {
+      // Don't close menu if blurring after the user has clicked clear
+      setClearingFromIcon(false);
+    } else if (!(containerRef !== null && containerRef !== void 0 && (_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(newlyFocusedElement))) {
+      // Don't close menu if focus is staying within the date picker's
+      // container. Makes keyboard accessibility of calendar possible
+      setIsOpen(false);
+      setIsFocused(false);
+      setWasOpenedFromCalendarButton(false);
+    }
+  };
+  var onSelectFocus = function onSelectFocus(event) {
+    var value = getValue();
+    if (clearingFromIcon) {
+      // Don't open menu if focussing after the user has clicked clear
+      setClearingFromIcon(false);
+    } else {
+      // Don't open when focused into via keyboard if the calendar button is present
+      setIsOpen(!shouldShowCalendarButton);
+      setCalendarValue(value);
+      setIsFocused(true);
+      setWasOpenedFromCalendarButton(false);
+    }
+    onFocus(event);
+  };
+  var onTextInput = function onTextInput(event) {
+    var inputValue = event.target.value;
+    if (inputValue) {
+      var parsed = (0, _datePickerMigration.parseDate)(inputValue, {
+        parseInputValue: rest === null || rest === void 0 ? void 0 : rest.parseInputValue,
+        dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
+        l10n: 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
+        setCalendarValue((0, _parseDate.getShortISOString)(parsed));
+      }
+    }
+    setIsOpen(true);
+    setWasOpenedFromCalendarButton(false);
+  };
+  var onInputKeyDown = function onInputKeyDown(event) {
+    var value = getValue();
+    var keyPressed = event.key.toLowerCase();
+
+    // If the input is focused and the calendar is not visible, handle space and enter clicks
+    if (!isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+      setIsOpen(true);
+      setWasOpenedFromCalendarButton(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 (wasOpenedFromCalendarButton) {
+          var _calendarButtonRef$cu2;
+          (_calendarButtonRef$cu2 = calendarButtonRef.current) === null || _calendarButtonRef$cu2 === void 0 || _calendarButtonRef$cu2.focus();
+        } else {
+          var _containerRef$current4;
+          var innerCombobox = containerRef === null || containerRef === void 0 || (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.querySelector('[role="combobox"]');
+          innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+        }
+        setIsOpen(false);
+        setShouldSetFocusOnCurrentDay(false);
+        setWasOpenedFromCalendarButton(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
+            setClearingFromIcon(false);
+            setValue('');
+          }
+          break;
+        }
+      case 'enter':
+        if (!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: 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;
+          setSelectInputValue('');
+          setIsOpen(false);
+          setValue(safeCalendarValue);
+          setCalendarValue(safeCalendarValue);
+          setWasOpenedFromCalendarButton(wasOpenedFromCalendarButton);
+          if (valueChanged) {
+            onChangePropWithAnalytics(safeCalendarValue);
+          }
+        }
+        break;
+      case 'arrowdown':
+      case 'arrowup':
+        if (!shouldSetFocusOnCurrentDay) {
+          setIsOpen(true);
+          setShouldSetFocusOnCurrentDay(true);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(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();
+      setIsKeyDown(true);
+      setWasOpenedFromCalendarButton(true);
+    }
+  };
+
+  // This event handler is triggered from both keydown and click. It's weird.
+  var onCalendarButtonClick = function onCalendarButtonClick(e) {
+    setIsOpen(function (isOpen) {
+      if (isOpen) {
+        var _props$selectProps2, _props$selectProps2$o;
+        (_props$selectProps2 = props.selectProps) === null || _props$selectProps2 === void 0 || (_props$selectProps2$o = _props$selectProps2.onMenuClose) === null || _props$selectProps2$o === void 0 || _props$selectProps2$o.call(_props$selectProps2);
+        return false;
+      } else {
+        var _props$selectProps3, _props$selectProps3$o;
+        (_props$selectProps3 = props.selectProps) === null || _props$selectProps3 === void 0 || (_props$selectProps3$o = _props$selectProps3.onMenuOpen) === null || _props$selectProps3$o === void 0 || _props$selectProps3$o.call(_props$selectProps3);
+        return true;
+      }
+    });
+    setWasOpenedFromCalendarButton(true);
+    e.stopPropagation();
+  };
+  var onClear = function onClear() {
+    setValue('');
+    setCalendarValue(defaultValue || (0, _parseDate.getShortISOString)(new Date()));
+    if (!hideIcon) {
+      setClearingFromIcon(true);
+    }
+    onChangePropWithAnalytics('');
+  };
+
+  // `unknown` is used because `value` is unused so it does not matter.
+  var onSelectChange = function onSelectChange(_value, action) {
+    // Used for native clear event in React Select
+    // Triggered when clicking ClearIndicator or backspace with no value
+    if (action.action === 'clear') {
+      onClear();
+    }
+  };
+  var handleSelectInputChange = function handleSelectInputChange(selectInputValue, actionMeta) {
+    if (selectProps.onInputChange) {
+      selectProps.onInputChange(selectInputValue, actionMeta);
+    }
+    setSelectInputValue(selectInputValue);
+  };
+  var getContainerRef = (0, _react.useCallback)(function (ref) {
+    var oldRef = containerRef.current;
+    containerRef.current = ref;
+
+    // Cause a re-render if we're getting the container ref for the first time
+    // as the layered menu requires it for dimension calculation
+    if (oldRef == null && ref != null) {
+      forceUpdate();
+    }
+  }, [containerRef]);
+  var getterValue = getValue();
+  var actualSelectInputValue;
+  actualSelectInputValue = selectInputValue;
+  var menuIsOpen = getIsOpen() && !isDisabled;
+  var showClearIndicator = Boolean((getterValue || selectInputValue) && !hideIcon);
+  var clearIndicator = function clearIndicator(props) {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.dropdownIndicatorStyles
+    }, /*#__PURE__*/React.createElement(Icon, props));
+  };
+  var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
+  var valueId = (0, _useId.useId)();
+  var SingleValue = (0, _singleValue.makeSingleValue)({
+    id: valueId,
+    lang: propLocale
+  });
+  var selectComponents = _objectSpread(_objectSpread(_objectSpread({}, selectProps.components), {}, {
+    DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
+  }, shouldShowCalendarButton ? {
+    IndicatorsContainer: function IndicatorsContainer(props) {
+      return /*#__PURE__*/React.createElement(_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: containerRef.current,
+    calendarDisabled: disabled,
+    calendarDisabledDateFilter: disabledDateFilter,
+    calendarMaxDate: maxDate,
+    calendarMinDate: minDate,
+    calendarRef: calendarRef,
+    calendarValue: getterValue && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(getterValue)),
+    calendarView: calendarValue,
+    onCalendarChange: onCalendarChange,
+    onCalendarSelect: onCalendarSelect,
+    calendarLocale: locale,
+    calendarWeekStartDay: weekStartDay,
+    shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
+    /**
+     * This overrides the inner wrapper the Calendar.
+     * @private Please use this with extreme caution, this API may be changed in the future.
+     */
+    menuInnerWrapper: props === null || props === void 0 ? void 0 : props.menuInnerWrapper
+  };
+
+  // @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 = getterValue ? {
+    label: (0, _datePickerMigration.formatDate)(getterValue, {
+      formatDisplayLabel: formatDisplayLabel,
+      dateFormat: rest === null || rest === void 0 ? void 0 : rest.dateFormat,
+      l10n: l10n
+    }),
+    value: getterValue
+  } : null;
+
+  // `label` takes precedence of the `inputLabel`
+  var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
+  var openCalendarLabelId = "open-calendar-label--".concat((0, _useId.useId)());
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+    "data-testid": testId && "".concat(testId, "--container"),
+    onBlur: onContainerBlur,
+    onFocus: onContainerFocus,
+    onClick: onInputClick,
+    onInput: onTextInput,
+    onKeyDown: onInputKeyDown,
+    ref: getContainerRef
+    // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
+    ,
+    role: "presentation",
+    className: (0, _runtime.ax)([styles.pickerContainerStyle])
+  }), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: getterValue,
+    "data-testid": testId && "".concat(testId, "--input")
+  }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+    appearance: appearance,
+    "aria-describedby": ariaDescribedBy ? "".concat(ariaDescribedBy, " ").concat(valueId) : valueId,
+    label: label || undefined,
+    autoFocus: autoFocus,
+    clearControlLabel: clearControlLabel,
+    closeMenuOnSelect: true,
+    enableAnimation: false,
+    inputId: id,
+    inputValue: actualSelectInputValue,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    menuIsOpen: menuIsOpen,
+    onBlur: onSelectBlur,
+    onChange: onSelectChange,
+    onFocus: onSelectFocus,
+    onInputChange: handleSelectInputChange,
+    placeholder: (0, _datePickerMigration.getPlaceholder)({
+      placeholder: placeholder,
+      l10n: l10n
+    })
+    // @ts-ignore -- Type 'OptionType' is not assignable to type '{ label: string; value: string; }'
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    styles: mergedStyles,
+    value: initialValue
+  }, selectProps, {
+    // 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
+    // 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,
+    menuInnerWrapper: calendarProps.menuInnerWrapper
+  })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.iconContainerStyles, getterValue && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
+    "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
+    id: openCalendarLabelId,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-icon, #292A2E)"
+      }));
+    },
+    onClick: onCalendarButtonClick,
+    onKeyDown: onCalendarButtonKeyDown,
+    ref: calendarButtonRef,
+    testId: testId && "".concat(testId, "--open-calendar-button")
+  })) : null);
+});
 var _default = exports.default = DatePicker;