@atlaskit/datetime-picker 15.1.4 → 15.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/datetime-picker
 
+## 15.2.0
+
+### Minor Changes
+
+- [`6f45e454d44fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6f45e454d44fe) -
+  [ux] Adds a dedicated button to open the calendar.
+
 ## 15.1.4
 
 ### Patch Changes

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

@@ -17,10 +17,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 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");
@@ -35,8 +39,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @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.1.4";
+var packageVersion = "15.2.0";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -55,6 +62,38 @@ var datePickerDefaultProps = {
   // 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'
+  }
+});
 var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DatePickerComponent, _Component);
   var _super = _createSuper(DatePickerComponent);
@@ -64,6 +103,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     (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 () {
@@ -83,23 +124,30 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref2) {
-      var _this$containerRef;
       var iso = _ref2.iso;
       _this.setState({
         selectInputValue: '',
         isOpen: false,
         calendarValue: iso,
-        value: iso
+        value: iso,
+        wasOpenedFromCalendarButton: false
       });
       _this.props.onChange(iso);
 
-      // Not ideal, and the alternative is to place a ref on the inner input of the Select
-      // but that would require a lot of extra work on the Select component just for this
-      // focus functionality. While that would be the 'right react' way to do it, it doesnt
-      // post any other benefits; performance wise, we are only searching within the
-      // container, making it quick.
-      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();
+      // 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
       });
@@ -107,7 +155,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
       if (!_this.props.isDisabled && !_this.getIsOpen()) {
         _this.setState({
-          isOpen: true
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -117,7 +166,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       if (!((_this$containerRef2 = _this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         _this.setState({
           isOpen: false,
-          shouldSetFocusOnCurrentDay: false
+          shouldSetFocusOnCurrentDay: false,
+          wasOpenedFromCalendarButton: false
         });
         _this.props.onBlur(event);
       }
@@ -140,7 +190,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         // container. Makes keyboard accessibility of calendar possible
         _this.setState({
           isOpen: false,
-          isFocused: false
+          isFocused: false,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -154,9 +205,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         });
       } else {
         _this.setState({
-          isOpen: true,
+          // Don't open when focused into via keyboard if the calendar button is present
+          isOpen: !_this.props.shouldShowCalendarButton,
           calendarValue: value,
-          isFocused: true
+          isFocused: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       _this.props.onFocus(event);
@@ -179,11 +232,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         }
       }
       _this.setState({
-        isOpen: true
+        isOpen: true,
+        wasOpenedFromCalendarButton: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
-      var _this$containerRef4;
       var calendarValue = _this.state.calendarValue;
       var value = _this.getValue();
       var keyPressed = event.key.toLowerCase();
@@ -191,7 +244,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       // 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
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       switch (keyPressed) {
@@ -202,11 +256,18 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           // 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.
-          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();
+          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
+            shouldSetFocusOnCurrentDay: false,
+            wasOpenedFromCalendarButton: false
           });
           break;
         case 'backspace':
@@ -241,7 +302,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
               selectInputValue: '',
               isOpen: false,
               value: safeCalendarValue,
-              calendarValue: safeCalendarValue
+              calendarValue: safeCalendarValue,
+              wasOpenedFromCalendarButton: false
             });
             if (valueChanged) {
               _this.props.onChange(safeCalendarValue);
@@ -260,6 +322,38 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           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.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: '',
@@ -301,6 +395,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       }
     });
     _this.state = {
+      isKeyDown: false,
       isOpen: _this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
@@ -309,29 +404,36 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       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
+      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,
-        disabled = _this$props.disabled,
-        disabledDateFilter = _this$props.disabledDateFilter,
         _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,
@@ -347,6 +449,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         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,
@@ -364,7 +467,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         lang: this.props.locale
       });
       var selectComponents = _objectSpread({
-        DropdownIndicator: dropDownIcon,
+        DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon,
         Menu: _menu.Menu,
         SingleValue: SingleValue
       }, !showClearIndicator && {
@@ -382,6 +485,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         calendarDisabledDateFilter: disabledDateFilter,
         calendarMaxDate: maxDate,
         calendarMinDate: minDate,
+        calendarRef: this.calendarRef,
         calendarValue: value && (0, _parseDate.getShortISOString)((0, _dateFns.parseISO)(value)),
         calendarView: calendarValue,
         onCalendarChange: this.onCalendarChange,
@@ -390,7 +494,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         calendarWeekStartDay: weekStartDay,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
-      //@ts-ignore react-select unsupported props
+
+      // @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);
@@ -411,10 +516,14 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         }),
         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,
@@ -433,7 +542,14 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
           autoFocus: autoFocus,
-          closeMenuOnSelect: true,
+          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,
@@ -458,7 +574,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           spacing: spacing,
           testId: testId
           // These aren't part of `Select`'s API, but we're using them here.
-          //@ts-ignore react-select unsupported props
+          // @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,
@@ -466,6 +582,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           calendarLocale: calendarProps.calendarLocale,
           calendarMaxDate: calendarProps.calendarMaxDate,
           calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
           calendarValue: calendarProps.calendarValue,
           calendarView: calendarProps.calendarView,
           calendarWeekStartDay: calendarProps.calendarWeekStartDay,
@@ -474,7 +591,32 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           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: ""
+          })));
+        }) : null)
       );
     }
   }], [{

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

@@ -32,7 +32,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @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.1.4";
+var packageVersion = "15.2.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -351,6 +351,7 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         placeholder: datePickerProps.placeholder,
         previousMonthLabel: datePickerProps.previousMonthLabel,
         selectProps: mergedDatePickerSelectProps,
+        shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
         spacing: datePickerProps.spacing || spacing,
         testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
         value: dateValue,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.1.4";
+var packageVersion = "15.2.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -281,7 +281,8 @@ var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ClearIndicator: _internal.EmptyComponent
   });
   var renderIconContainer = Boolean(!hideIcon && value);
-  // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+
+  // @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({}, base);

package/dist/cjs/internal/menu.js

@@ -72,6 +72,7 @@ var Menu = exports.Menu = function Menu(_ref) {
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
       previousMonthLabel: selectProps.previousMonthLabel,
+      ref: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,