baseui 10.2.1 → 10.6.0

package/button/styled-components.js

@@ -48,7 +48,7 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText
     },
     marginLeft: 0,

package/button/styled-components.js.flow

@@ -46,7 +46,10 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor:
+        $kind === KIND.minimal || $kind === KIND.tertiary
+          ? 'transparent'
+          : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText,
     },
     marginLeft: 0,

package/data-table/data-table.js

@@ -445,11 +445,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     viewState = EMPTY;
   }
 
+  var highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-baseweb": "data-table",
     style: props.style
-  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(highlightedRow) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
     style: {
       alignItems: 'center',
       backgroundColor: theme.colors.backgroundTertiary,
@@ -463,7 +464,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: theme.direction === 'rtl' ? 0 : 'initial',
       top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT
     }
-  }, ctx.rowActions.map(function (rowAction) {
+  }, (typeof ctx.rowActions === 'function' ? ctx.rowActions(highlightedRow) : ctx.rowActions).map(function (rowAction) {
+    if (rowAction.renderButton) {
+      var RowActionButton = rowAction.renderButton;
+      return /*#__PURE__*/React.createElement(RowActionButton, null);
+    }
+
     var RowActionIcon = rowAction.renderIcon;
     return /*#__PURE__*/React.createElement(_index.Button, {
       alt: rowAction.label,
@@ -480,7 +486,11 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       overrides: {
         BaseButton: {
           style: {
-            marginLeft: theme.sizing.scale300
+            marginLeft: theme.sizing.scale300,
+            paddingTop: theme.sizing.scale100,
+            paddingRight: theme.sizing.scale100,
+            paddingBottom: theme.sizing.scale100,
+            paddingLeft: theme.sizing.scale100
           }
         }
       }

package/data-table/data-table.js.flow

@@ -53,7 +53,7 @@ type HeaderContextT = {|
   onSelectNone: () => void,
   onSort: number => void,
   resizableColumnWidths: boolean,
-  rowActions: RowActionT[],
+  rowActions: RowActionT[] | (RowT => RowActionT[]),
   rowHeight: number,
   rowHighlightIndex: number,
   rows: RowT[],
@@ -554,6 +554,8 @@ const InnerTableElement = React.forwardRef<
     viewState = EMPTY;
   }
 
+  const highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
+
   return (
     <div ref={ref} data-baseweb="data-table" style={props.style}>
       <Headers />
@@ -571,7 +573,7 @@ const InnerTableElement = React.forwardRef<
       {ctx.rowActions &&
         Boolean(ctx.rowActions.length) &&
         ctx.rowHighlightIndex > 0 &&
-        Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) &&
+        Boolean(highlightedRow) &&
         !ctx.isScrollingX && (
           <div
             style={{
@@ -589,7 +591,15 @@ const InnerTableElement = React.forwardRef<
                 (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
             }}
           >
-            {ctx.rowActions.map(rowAction => {
+            {(typeof ctx.rowActions === 'function'
+              ? ctx.rowActions(highlightedRow)
+              : ctx.rowActions
+            ).map(rowAction => {
+              if (rowAction.renderButton) {
+                const RowActionButton = rowAction.renderButton;
+                return <RowActionButton />;
+              }
+
               const RowActionIcon = rowAction.renderIcon;
               return (
                 <Button
@@ -606,7 +616,13 @@ const InnerTableElement = React.forwardRef<
                   shape={BUTTON_SHAPES.round}
                   overrides={{
                     BaseButton: {
-                      style: {marginLeft: theme.sizing.scale300},
+                      style: {
+                        marginLeft: theme.sizing.scale300,
+                        paddingTop: theme.sizing.scale100,
+                        paddingRight: theme.sizing.scale100,
+                        paddingBottom: theme.sizing.scale100,
+                        paddingLeft: theme.sizing.scale100,
+                      },
                     },
                   }}
                 >

package/data-table/types.js.flow

@@ -87,6 +87,7 @@ export type RowActionT = {|
   label: string,
   onClick: ({event: SyntheticEvent<HTMLButtonElement>, row: RowT}) => mixed,
   renderIcon: React.AbstractComponent<{|size: number|}>,
+  renderButton?: React.AbstractComponent<{||}>,
 |};
 
 export type StatefulDataTablePropsT = {|
@@ -107,7 +108,7 @@ export type StatefulDataTablePropsT = {|
   onSelectionChange?: (RowT[]) => mixed,
   resizableColumnWidths?: boolean,
   rows: RowT[],
-  rowActions?: RowActionT[],
+  rowActions?: RowActionT[] | (RowT => RowActionT[]),
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,

package/datepicker/calendar-header.js

@@ -9,16 +9,18 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _arrowRight = _interopRequireDefault(require("../icon/arrow-right.js"));
+var _chevronRight = _interopRequireDefault(require("../icon/chevron-right.js"));
 
-var _arrowLeft = _interopRequireDefault(require("../icon/arrow-left.js"));
+var _chevronLeft = _interopRequireDefault(require("../icon/chevron-left.js"));
 
-var _triangleDown = _interopRequireDefault(require("../icon/triangle-down.js"));
+var _chevronDown = _interopRequireDefault(require("../icon/chevron-down.js"));
 
 var _dateFnsAdapter = _interopRequireDefault(require("./utils/date-fns-adapter.js"));
 
 var _dateHelpers = _interopRequireDefault(require("./utils/date-helpers.js"));
 
+var _calendarHeaderHelpers = require("./utils/calendar-header-helpers.js");
+
 var _index = require("../menu/index.js");
 
 var _index2 = require("../popover/index.js");
@@ -55,6 +57,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -93,10 +99,6 @@ var DIRECTION = {
   PREVIOUS: 'previous'
 };
 
-function yearMonthToId(year, month) {
-  return "".concat(year, "-").concat(month);
-}
-
 function idToYearMonth(id) {
   return id.split('-').map(Number);
 }
@@ -115,14 +117,13 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "items", void 0);
+    _defineProperty(_assertThisInitialized(_this), "monthItems", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "minYear", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "maxYear", void 0);
+    _defineProperty(_assertThisInitialized(_this), "yearItems", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isMonthYearDropdownOpen: false,
+      isMonthDropdownOpen: false,
+      isYearDropdownOpen: false,
       isFocusVisible: false
     });
 
@@ -130,17 +131,94 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return _this.props.date || _this.dateHelpers.date();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleYearChange", function (_ref2) {
-      var value = _ref2.value;
+    _defineProperty(_assertThisInitialized(_this), "getYearItems", function () {
+      var date = _this.getDateProp();
 
-      if (_this.props.onYearChange) {
-        // $FlowFixMe
-        _this.props.onYearChange({
-          date: _this.dateHelpers.setYear(_this.getDateProp(), value[0].id)
+      var maxDate = _this.props.maxDate;
+      var minDate = _this.props.minDate;
+      var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      var minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
+
+      var selectedMonth = _this.dateHelpers.getMonth(date); // TODO: this logic can be optimized to only run when minDate / maxDate change
+
+
+      _this.yearItems = Array.from({
+        length: maxYear - minYear + 1
+      }, function (_, i) {
+        return minYear + i;
+      }).map(function (year) {
+        return {
+          id: year.toString(),
+          label: year.toString()
+        };
+      });
+      var monthOfMaxDate = maxDate ? _this.dateHelpers.getMonth(maxDate) : MAX_MONTH;
+      var monthOfMinDate = minDate ? _this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      var maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, function (x, i) {
+        return i;
+      }); // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      var minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, function (x, i) {
+        return i + monthOfMinDate;
+      });
+
+      if (selectedMonth > maxYearMonths[maxYearMonths.length - 1]) {
+        var lastIdx = _this.yearItems.length - 1;
+        _this.yearItems[lastIdx] = _objectSpread(_objectSpread({}, _this.yearItems[lastIdx]), {}, {
+          disabled: true
+        });
+      }
+
+      if (selectedMonth < minYearMonths[0]) {
+        _this.yearItems[0] = _objectSpread(_objectSpread({}, _this.yearItems[0]), {}, {
+          disabled: true
         });
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getMonthItems", function () {
+      var date = _this.getDateProp();
+
+      var year = _this.dateHelpers.getYear(date);
+
+      var maxDate = _this.props.maxDate;
+      var minDate = _this.props.minDate;
+      var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      var minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
+      var monthOfMaxDate = maxDate ? _this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      var maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, function (x, i) {
+        return i;
+      });
+      var monthOfMinDate = minDate ? _this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      var minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, function (x, i) {
+        return i + monthOfMinDate;
+      });
+      var maxMinYearMonthsIntersection = maxYearMonths.filter(function (year) {
+        return minYearMonths.includes(year);
+      });
+      var filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null;
+
+      var formatMonthLabel = function formatMonthLabel(month) {
+        return _this.dateHelpers.getMonthInLocale(month, _this.props.locale);
+      };
+
+      _this.monthItems = (0, _calendarHeaderHelpers.getFilteredMonthItems)({
+        filterMonthsList: filterMonthsList,
+        formatMonthLabel: formatMonthLabel
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "increaseMonth", function () {
       if (_this.props.onMonthChange) {
         // $FlowFixMe
@@ -208,9 +286,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderPreviousMonthButton", function (_ref3) {
-      var locale = _ref3.locale,
-          theme = _ref3.theme;
+    _defineProperty(_assertThisInitialized(_this), "renderPreviousMonthButton", function (_ref2) {
+      var locale = _ref2.locale,
+          theme = _ref2.theme;
 
       var date = _this.getDateProp();
 
@@ -244,7 +322,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           PrevButton = _getOverrides2[0],
           prevButtonProps = _getOverrides2[1];
 
-      var _getOverrides3 = (0, _overrides.getOverrides)(overrides.PrevButtonIcon, theme.direction === 'rtl' ? _arrowRight.default : _arrowLeft.default),
+      var _getOverrides3 = (0, _overrides.getOverrides)(overrides.PrevButtonIcon, theme.direction === 'rtl' ? _chevronRight.default : _chevronLeft.default),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
           PrevButtonIcon = _getOverrides4[0],
           prevButtonIconProps = _getOverrides4[1];
@@ -274,9 +352,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       }, prevButtonIconProps)));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderNextMonthButton", function (_ref4) {
-      var locale = _ref4.locale,
-          theme = _ref4.theme;
+    _defineProperty(_assertThisInitialized(_this), "renderNextMonthButton", function (_ref3) {
+      var locale = _ref3.locale,
+          theme = _ref3.theme;
 
       var date = _this.getDateProp();
 
@@ -310,7 +388,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           NextButton = _getOverrides6[0],
           nextButtonProps = _getOverrides6[1];
 
-      var _getOverrides7 = (0, _overrides.getOverrides)(overrides.NextButtonIcon, theme.direction === 'rtl' ? _arrowLeft.default : _arrowRight.default),
+      var _getOverrides7 = (0, _overrides.getOverrides)(overrides.NextButtonIcon, theme.direction === 'rtl' ? _chevronLeft.default : _chevronRight.default),
           _getOverrides8 = _slicedToArray(_getOverrides7, 2),
           NextButtonIcon = _getOverrides8[0],
           nextButtonIconProps = _getOverrides8[1];
@@ -345,7 +423,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "canArrowsOpenDropdown", function (event) {
-      if (!_this.state.isMonthYearDropdownOpen) {
+      if (!_this.state.isMonthDropdownOpen && !_this.state.isYearDropdownOpen) {
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
           return true;
         }
@@ -357,10 +435,12 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "renderMonthYearDropdown", function () {
       var date = _this.getDateProp();
 
+      var month = _this.dateHelpers.getMonth(date);
+
+      var year = _this.dateHelpers.getYear(date);
+
       var _this$props3 = _this.props,
           locale = _this$props3.locale,
-          maxDate = _this$props3.maxDate,
-          minDate = _this$props3.minDate,
           _this$props3$override = _this$props3.overrides,
           overrides = _this$props3$override === void 0 ? {} : _this$props3$override;
 
@@ -395,115 +475,144 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       menuProps && menuProps.overrides); // $FlowFixMe
 
       menuProps.overrides = menuOverrides;
-      var defaultMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-      var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_YEAR;
-      var minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
-      var maxDateMonth = maxDate ? _this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... maxDateMonth]
 
-      var maxYearMonths = Array.from({
-        length: maxDateMonth + 1
-      }, function (x, i) {
-        return i;
+      var initialMonthIndex = _this.monthItems.findIndex(function (month) {
+        return month.id === _this.dateHelpers.getMonth(date).toString();
       });
-      var minDateMonth = minDate ? _this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [minDateMonth, ...., 10, 11]
 
-      var minYearMonths = Array.from({
-        length: 12 - minDateMonth
-      }, function (x, i) {
-        return i + minDateMonth;
+      var initialYearIndex = _this.yearItems.findIndex(function (year) {
+        return year.id === _this.dateHelpers.getYear(date).toString();
       });
 
-      if (_this.maxYear !== maxYear || _this.minYear !== minYear) {
-        _this.maxYear = maxYear;
-        _this.minYear = minYear;
-        _this.items = [];
+      var monthTitle = "".concat(_this.dateHelpers.getMonthInLocale(_this.dateHelpers.getMonth(date), locale));
+      var yearTitle = "".concat(_this.dateHelpers.getYear(date));
+      return _this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, "".concat(monthTitle, " ").concat(yearTitle)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+        placement: "bottom",
+        autoFocus: true,
+        focusLock: true,
+        isOpen: _this.state.isMonthDropdownOpen,
+        onClick: function onClick() {
+          _this.setState(function (prev) {
+            return {
+              isMonthDropdownOpen: !prev.isMonthDropdownOpen
+            };
+          });
+        },
+        onClickOutside: function onClickOutside() {
+          return _this.setState({
+            isMonthDropdownOpen: false
+          });
+        },
+        onEsc: function onEsc() {
+          return _this.setState({
+            isMonthDropdownOpen: false
+          });
+        },
+        content: function content() {
+          return /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
+            initialState: {
+              highlightedIndex: initialMonthIndex,
+              isFocused: true
+            },
+            items: _this.monthItems,
+            onItemSelect: function onItemSelect(_ref4) {
+              var item = _ref4.item,
+                  event = _ref4.event;
+              event.preventDefault();
+              var month = idToYearMonth(item.id);
+
+              var updatedDate = _this.dateHelpers.set(date, {
+                year: year,
+                month: month
+              });
 
-        var _loop = function _loop(i) {
-          var months = void 0;
+              _this.props.onMonthChange && _this.props.onMonthChange({
+                date: updatedDate
+              });
 
-          if (i === minYear && i === maxYear) {
-            months = maxYearMonths.filter(function (month) {
-              return minYearMonths.includes(month);
+              _this.setState({
+                isMonthDropdownOpen: false
+              });
+            }
+          }, menuProps));
+        }
+      }, popoverProps), /*#__PURE__*/React.createElement(MonthYearSelectButton, _extends({
+        "aria-live": "polite",
+        type: "button",
+        $isFocusVisible: _this.state.isFocusVisible,
+        onKeyUp: function onKeyUp(event) {
+          if (_this.canArrowsOpenDropdown(event)) {
+            _this.setState({
+              isMonthDropdownOpen: true
             });
-          } else if (i === minYear) {
-            months = minYearMonths;
-          } else if (i === maxYear) {
-            months = maxYearMonths;
-          } else {
-            months = defaultMonths;
+          }
+        },
+        onKeyDown: function onKeyDown(event) {
+          if (_this.canArrowsOpenDropdown(event)) {
+            // disables page scroll
+            event.preventDefault();
           }
 
-          months.forEach(function (month) {
-            _this.items.push({
-              id: yearMonthToId(i, month),
-              label: "".concat(_this.dateHelpers.getMonthInLocale(month, locale), " ").concat(i)
+          if (event.key === 'Tab') {
+            _this.setState({
+              isMonthDropdownOpen: false
             });
-          });
-        };
-
-        for (var i = minYear; i <= maxYear; i++) {
-          _loop(i);
+          }
         }
-      }
-
-      var initialIndex = _this.items.findIndex(function (item) {
-        return item.id === yearMonthToId(_this.dateHelpers.getYear(date), _this.dateHelpers.getMonth(date));
-      });
-
-      var monthYearTitle = "".concat(_this.dateHelpers.getMonthInLocale(_this.dateHelpers.getMonth(date), locale), " ").concat(_this.dateHelpers.getYear(date));
-      return _this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, monthYearTitle) : /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(_chevronDown.default, {
+        title: "",
+        overrides: {
+          Svg: {
+            props: {
+              role: 'presentation'
+            }
+          }
+        }
+      })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
-        autoFocus: true,
         focusLock: true,
-        isOpen: _this.state.isMonthYearDropdownOpen,
+        isOpen: _this.state.isYearDropdownOpen,
         onClick: function onClick() {
           _this.setState(function (prev) {
             return {
-              isMonthYearDropdownOpen: !prev.isMonthYearDropdownOpen
+              isYearDropdownOpen: !prev.isYearDropdownOpen
             };
           });
         },
         onClickOutside: function onClickOutside() {
           return _this.setState({
-            isMonthYearDropdownOpen: false
+            isYearDropdownOpen: false
           });
         },
         onEsc: function onEsc() {
           return _this.setState({
-            isMonthYearDropdownOpen: false
+            isYearDropdownOpen: false
           });
         },
         content: function content() {
           return /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
             initialState: {
-              highlightedIndex: initialIndex,
+              highlightedIndex: initialYearIndex,
               isFocused: true
             },
-            items: _this.items,
+            items: _this.yearItems,
             onItemSelect: function onItemSelect(_ref5) {
               var item = _ref5.item,
                   event = _ref5.event;
               event.preventDefault();
-
-              var _idToYearMonth = idToYearMonth(item.id),
-                  _idToYearMonth2 = _slicedToArray(_idToYearMonth, 2),
-                  year = _idToYearMonth2[0],
-                  month = _idToYearMonth2[1];
+              var year = idToYearMonth(item.id);
 
               var updatedDate = _this.dateHelpers.set(date, {
                 year: year,
                 month: month
               });
 
-              _this.props.onMonthChange && _this.props.onMonthChange({
-                date: updatedDate
-              });
               _this.props.onYearChange && _this.props.onYearChange({
                 date: updatedDate
               });
 
               _this.setState({
-                isMonthYearDropdownOpen: false
+                isYearDropdownOpen: false
               });
             }
           }, menuProps));
@@ -515,7 +624,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -527,11 +636,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
           if (event.key === 'Tab') {
             _this.setState({
-              isMonthYearDropdownOpen: false
+              isYearDropdownOpen: false
             });
           }
         }
-      }, monthYearSelectButtonProps), monthYearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(_triangleDown.default, {
+      }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(_chevronDown.default, {
         title: "",
         overrides: {
           Svg: {
@@ -540,15 +649,38 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }))));
+      })))));
     });
 
     _this.dateHelpers = new _dateHelpers.default(props.adapter);
-    _this.items = [];
+    _this.monthItems = [];
+    _this.yearItems = [];
     return _this;
   }
 
   _createClass(CalendarHeader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.getYearItems();
+      this.getMonthItems();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var selectedMonthDidChange = this.dateHelpers.getMonth(this.props.date) !== this.dateHelpers.getMonth(prevProps.date);
+      var selectedYearDidChange = this.dateHelpers.getYear(this.props.date) !== this.dateHelpers.getYear(prevProps.date);
+
+      if (selectedMonthDidChange) {
+        // re-calculate yearItems
+        this.getYearItems();
+      }
+
+      if (selectedYearDidChange) {
+        // re-calculate monthItems
+        this.getMonthItems();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;