baseui 0.0.0-alpha-6b3031e → 0.0.0-alpha-3a96a5e

package/app-nav-bar/user-menu.js

@@ -153,6 +153,7 @@ function UserMenuComponent(props) {
         }
       }, userMenuProps));
     },
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: function onOpen() {

package/app-nav-bar/user-menu.js.flow

@@ -120,6 +120,7 @@ export default function UserMenuComponent(props: {|
           {...userMenuProps}
         />
       )}
+      autoFocus={false}
       dismissOnEsc={true}
       dismissOnClickOutside={true}
       onOpen={() => setIsOpen(true)}

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/card/styled-components.js

@@ -98,7 +98,6 @@ var Title = (0, _index.styled)('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
     color: $theme.colors.contentPrimary,
-    fontWeight: 500,
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,

package/card/styled-components.js.flow

@@ -72,7 +72,6 @@ export const Thumbnail = styled<{}>('img', ({$theme}) => ({
 export const Title = styled<{}>('h1', ({$theme}) => ({
   ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -306,7 +307,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: _index2.PLACEMENT.bottomLeft,
@@ -318,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -356,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -371,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -258,6 +259,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       {...rootProps}
     >
       <OverriddenPopover
+        // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+        // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+        // Select Component does the same thing
+        autoFocus={false}
         isOpen={isOpen}
         overrides={popoverOverrides}
         placement={PLACEMENT.bottomLeft}
@@ -270,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -318,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -334,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/index.d.ts

@@ -17,11 +17,14 @@ export interface ComboboxOverrides {
   ListItem?: Override<any>;
 }
 
-export type PropsT<OptionT = unknown> = {
+export type PropsT<OptionT = any> = {
   autocomplete?: boolean;
   disabled?: boolean;
-  mapOptionToNode?: ({isSelected: boolean, option: OptionT}) => React.ReactNode;
-  mapOptionToString: (OptionT) => string;
+  mapOptionToNode?: (option: {
+    isSelected: boolean;
+    option: OptionT;
+  }) => React.ReactNode;
+  mapOptionToString: (option: OptionT) => string;
   id?: string;
   name?: string;
   inputRef?: React.Ref<HTMLInputElement>;

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/data-table/column-datetime.js

@@ -86,6 +86,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -455,12 +456,13 @@ function DatetimeFilter(props) {
       if (Array.isArray(date)) {
         if (!date.length) return;
         var nextDates = date.map(function (d, i) {
-          return (0, _index13.applyDateToTime)(rangeDates[i], d);
+          return d ? (0, _index13.applyDateToTime)(rangeDates[i], d) : null;
         });
         setRangeDates(nextDates);
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

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

@@ -68,6 +68,7 @@ type FilterParametersT = {|
 type DatetimeColumnT = ColumnT<Date, FilterParametersT>;
 
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -409,12 +410,13 @@ function DatetimeFilter(props) {
                     if (Array.isArray(date)) {
                       if (!date.length) return;
                       const nextDates = date.map((d, i) =>
-                        applyDateToTime(rangeDates[i], d),
+                        d ? applyDateToTime(rangeDates[i], d) : null,
                       );
                       setRangeDates(nextDates);
                     }
                   }}
                   formatString={DATE_FORMAT}
+                  mask={MASK}
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}

package/datepicker/calendar-header.js

@@ -43,10 +43,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -61,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); } }
@@ -131,6 +131,94 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return _this.props.date || _this.dateHelpers.date();
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getYearItems", function () {
+      var date = _this.getDateProp();
+
+      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
@@ -204,8 +292,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides = _this.props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+      var _this$props3 = _this.props,
+          _this$props3$override = _this$props3.overrides,
+          overrides = _this$props3$override === void 0 ? {} : _this$props3$override,
+          density = _this$props3.density;
 
       var allPrevDaysDisabled = _this.dateHelpers.monthDisabledBefore(date, _this.props);
 
@@ -255,7 +345,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $disabled: isDisabled,
         $order: _this.props.order
       }, prevButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(PrevButtonIcon, _extends({
-        size: '24px',
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -270,8 +360,10 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       var date = _this.getDateProp();
 
-      var _this$props$overrides2 = _this.props.overrides,
-          overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
+      var _this$props4 = _this.props,
+          _this$props4$override = _this$props4.overrides,
+          overrides = _this$props4$override === void 0 ? {} : _this$props4$override,
+          density = _this$props4.density;
 
       var allNextDaysDisabled = _this.dateHelpers.monthDisabledAfter(date, _this.props);
 
@@ -325,7 +417,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: _this.state.isFocusVisible,
         $order: _this.props.order
       }, nextButtonProps), isHidden ? null : /*#__PURE__*/React.createElement(NextButtonIcon, _extends({
-        size: '24px',
+        size: density === _constants.DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -351,12 +443,11 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
 
       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;
+      var _this$props5 = _this.props,
+          locale = _this$props5.locale,
+          _this$props5$override = _this$props5.overrides,
+          overrides = _this$props5$override === void 0 ? {} : _this$props5$override,
+          density = _this$props5.density;
 
       var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MonthYearSelectButton, _styledComponents.StyledMonthYearSelectButton),
           _getOverrides10 = _slicedToArray(_getOverrides9, 2),
@@ -389,62 +480,13 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       menuProps && menuProps.overrides); // $FlowFixMe
 
       menuProps.overrides = menuOverrides;
-      var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_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 minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
-      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;
-      _this.monthItems = (0, _calendarHeaderHelpers.getMonthItems)({
-        filterMonthsList: filterMonthsList,
-        formatMonthLabel: function formatMonthLabel(month) {
-          return _this.dateHelpers.getMonthInLocale(month, locale);
-        }
-      });
-      _this.yearItems = Array.from({
-        length: maxYear - minYear + 1
-      }, function (_, i) {
-        return minYear + i;
-      }).map(function (year) {
-        return {
-          id: year.toString(),
-          label: year.toString()
-        };
-      });
-
-      if (month > maxYearMonths[maxYearMonths.length - 1]) {
-        var lastIdx = _this.yearItems.length - 1;
-        _this.yearItems[lastIdx] = _objectSpread(_objectSpread({}, _this.yearItems[lastIdx]), {}, {
-          disabled: true
-        });
-      }
-
-      if (month < minYearMonths[0]) {
-        _this.yearItems[0] = _objectSpread(_objectSpread({}, _this.yearItems[0]), {}, {
-          disabled: true
-        });
-      }
 
       var initialMonthIndex = _this.monthItems.findIndex(function (month) {
-        return month.id === _this.dateHelpers.getMonth(date);
+        return month.id === _this.dateHelpers.getMonth(date).toString();
       });
 
       var initialYearIndex = _this.yearItems.findIndex(function (year) {
-        return year.id === _this.dateHelpers.getYear(date);
+        return year.id === _this.dateHelpers.getYear(date).toString();
       });
 
       var monthTitle = "".concat(_this.dateHelpers.getMonthInLocale(_this.dateHelpers.getMonth(date), locale));
@@ -503,6 +545,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -530,7 +573,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         focusLock: true,
@@ -584,6 +628,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
         "aria-live": "polite",
         type: "button",
         $isFocusVisible: _this.state.isFocusVisible,
+        $density: density,
         onKeyUp: function onKeyUp(event) {
           if (_this.canArrowsOpenDropdown(event)) {
             _this.setState({
@@ -611,7 +656,8 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
+        },
+        size: density === _constants.DENSITY.high ? 16 : 24
       })))));
     });
 
@@ -622,12 +668,36 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
   }
 
   _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;
 
-      var _this$props$overrides3 = this.props.overrides,
-          overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
+      var _this$props6 = this.props,
+          _this$props6$override = _this$props6.overrides,
+          overrides = _this$props6$override === void 0 ? {} : _this$props6$override,
+          density = _this$props6.density;
 
       var _getOverrides17 = (0, _overrides.getOverrides)(overrides.CalendarHeader, _styledComponents.StyledCalendarHeader),
           _getOverrides18 = _slicedToArray(_getOverrides17, 2),
@@ -648,6 +718,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(_index3.LocaleContext.Consumer, null, function (locale) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CalendarHeader, _extends({}, calendarHeaderProps, {
+            $density: _this2.props.density,
             onFocus: (0, _focusVisible.forkFocus)(calendarHeaderProps, _this2.handleFocus),
             onBlur: (0, _focusVisible.forkBlur)(calendarHeaderProps, _this2.handleBlur)
           }), _this2.renderPreviousMonthButton({
@@ -664,7 +735,9 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(WeekdayHeader, _extends({
               key: offset,
               alt: _this2.dateHelpers.getWeekdayInLocale(day, _this2.props.locale)
-            }, weekdayHeaderProps), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
+            }, weekdayHeaderProps, {
+              $density: density
+            }), _this2.dateHelpers.getWeekdayMinInLocale(day, _this2.props.locale));
           })));
         });
       });