baseui 10.5.0 → 10.6.0

package/esm/datepicker/calendar-header.js

@@ -14,6 +14,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); } }
@@ -43,11 +47,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import ArrowRight from '../icon/arrow-right.js';
-import ArrowLeft from '../icon/arrow-left.js';
-import TriangleDown from '../icon/triangle-down.js';
+import ChevronRight from '../icon/chevron-right.js';
+import ChevronLeft from '../icon/chevron-left.js';
+import ChevronDown from '../icon/chevron-down.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
+import { getFilteredMonthItems } from './utils/calendar-header-helpers.js';
 import { StatefulMenu } from '../menu/index.js';
 import { Popover } from '../popover/index.js';
 import { LocaleContext } from '../locale/index.js';
@@ -73,10 +78,6 @@ var DIRECTION = {
   PREVIOUS: 'previous'
 };
 
-function yearMonthToId(year, month) {
-  return "".concat(year, "-").concat(month);
-}
-
 function idToYearMonth(id) {
   return id.split('-').map(Number);
 }
@@ -95,14 +96,13 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "items", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "minYear", void 0);
+    _defineProperty(_assertThisInitialized(_this), "monthItems", 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
     });
 
@@ -110,17 +110,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 = getFilteredMonthItems({
+        filterMonthsList: filterMonthsList,
+        formatMonthLabel: formatMonthLabel
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "increaseMonth", function () {
       if (_this.props.onMonthChange) {
         // $FlowFixMe
@@ -188,9 +265,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();
 
@@ -224,7 +301,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           PrevButton = _getOverrides2[0],
           prevButtonProps = _getOverrides2[1];
 
-      var _getOverrides3 = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ArrowRight : ArrowLeft),
+      var _getOverrides3 = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ChevronRight : ChevronLeft),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
           PrevButtonIcon = _getOverrides4[0],
           prevButtonIconProps = _getOverrides4[1];
@@ -254,9 +331,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();
 
@@ -290,7 +367,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
           NextButton = _getOverrides6[0],
           nextButtonProps = _getOverrides6[1];
 
-      var _getOverrides7 = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ArrowLeft : ArrowRight),
+      var _getOverrides7 = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ChevronLeft : ChevronRight),
           _getOverrides8 = _slicedToArray(_getOverrides7, 2),
           NextButtonIcon = _getOverrides8[0],
           nextButtonIconProps = _getOverrides8[1];
@@ -325,7 +402,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;
         }
@@ -337,10 +414,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;
 
@@ -375,115 +454,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, {
+        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));
@@ -495,7 +603,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -507,11 +615,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, {
+      }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
           Svg: {
@@ -520,15 +628,38 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }))));
+      })))));
     });
 
     _this.dateHelpers = new DateHelpers(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;

package/esm/datepicker/constants.js

@@ -20,4 +20,5 @@ export var STATE_CHANGE_TYPE = Object.freeze({
   mouseOver: 'mouseOver',
   mouseLeave: 'mouseLeave'
 });
-export var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export var DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

package/esm/datepicker/day.js

@@ -344,6 +344,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $startOfMonth: this.dateHelpers.isStartOfMonth(date),
         $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+        $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
         $peekNextMonth: this.props.peekNextMonth,

package/esm/datepicker/utils/calendar-header-helpers.js

@@ -0,0 +1,45 @@
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { DEFAULT_MONTHS } from '../constants.js';
+
+var getDefaultMonthItems = function getDefaultMonthItems(formatMonthLabel) {
+  return DEFAULT_MONTHS.map(function (month) {
+    return {
+      id: month.toString(),
+      label: formatMonthLabel(month)
+    };
+  });
+};
+
+export var filterMonthItems = function filterMonthItems(monthItems, filterList) {
+  return monthItems.map(function (month) {
+    if (!filterList.includes(Number(month.id))) {
+      return _objectSpread(_objectSpread({}, month), {}, {
+        disabled: true
+      });
+    }
+
+    return month;
+  });
+};
+export var getFilteredMonthItems = function getFilteredMonthItems(_ref) {
+  var filterMonthsList = _ref.filterMonthsList,
+      formatMonthLabel = _ref.formatMonthLabel;
+  var monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};

package/esm/dnd-list/index.js

@@ -4,7 +4,8 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-export { arrayMove, arrayRemove } from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
+export { arrayMove, arrayRemove };
 export { default as StatefulList } from './stateful-list.js';
 export { default as StatefulListContainer } from './stateful-list-container.js';
 export { default as List } from './list.js'; // Constants

package/esm/drawer/drawer.js

@@ -331,7 +331,8 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
           returnFocus: true,
-          autoFocus: autoFocus
+          autoFocus: autoFocus,
+          noFocusGuards: true
         }, /*#__PURE__*/React.createElement(Root, _extends({
           "data-baseweb": "drawer",
           ref: _this3.getRef('Root')

package/esm/popover/stateful-container.js

@@ -64,6 +64,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(e);
       }
 
+      if (_this.props.focusLock || _this.props.autoFocus) {
+        return;
+      }
+
       _this.close();
     });
 

package/esm/rating/emoticon-rating.js

@@ -213,8 +213,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/esm/rating/star-rating.js

@@ -216,8 +216,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/esm/select/select-component.js

@@ -159,7 +159,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -307,7 +307,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -661,7 +661,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -697,7 +697,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
@@ -926,7 +926,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,