baseui 10.4.0 → 10.7.1

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,17 +47,18 @@ 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';
 import { ThemeContext } from '../styles/theme-provider.js';
 import { StyledCalendarHeader, StyledPrevButton, StyledNextButton, StyledMonthHeader, StyledWeekdayHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer } from './styled-components.js';
-import { ORIENTATION, WEEKDAYS } from './constants.js';
+import { ORIENTATION, WEEKDAYS, DENSITY } from './constants.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.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,14 +265,16 @@ 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();
 
-      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);
 
@@ -224,7 +303,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];
@@ -245,7 +324,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 === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -254,14 +333,16 @@ 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();
 
-      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);
 
@@ -290,7 +371,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];
@@ -315,7 +396,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 === DENSITY.high ? 24 : 36,
         overrides: {
           Svg: {
             style: navBtnStyle
@@ -325,7 +406,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,12 +418,15 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "renderMonthYearDropdown", function () {
       var date = _this.getDateProp();
 
-      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 month = _this.dateHelpers.getMonth(date);
+
+      var year = _this.dateHelpers.getYear(date);
+
+      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 = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton),
           _getOverrides10 = _slicedToArray(_getOverrides9, 2),
@@ -375,115 +459,146 @@ 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,
+        $density: density,
+        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'
+            }
+          }
+        },
+        size: density === DENSITY.high ? 16 : 24
+      })))), /*#__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));
@@ -492,10 +607,11 @@ 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({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -507,11 +623,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: {
@@ -519,22 +635,48 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
               role: 'presentation'
             }
           }
-        }
-      }))));
+        },
+        size: density === DENSITY.high ? 16 : 24
+      })))));
     });
 
     _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;
 
-      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 = getOverrides(overrides.CalendarHeader, StyledCalendarHeader),
           _getOverrides18 = _slicedToArray(_getOverrides17, 2),
@@ -555,6 +697,7 @@ var CalendarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CalendarHeader, _extends({}, calendarHeaderProps, {
+            $density: _this2.props.density,
             onFocus: forkFocus(calendarHeaderProps, _this2.handleFocus),
             onBlur: forkBlur(calendarHeaderProps, _this2.handleBlur)
           }), _this2.renderPreviousMonthButton({
@@ -571,7 +714,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));
           })));
         });
       });

package/esm/datepicker/calendar.js

@@ -65,7 +65,7 @@ import { StyledCalendarContainer, StyledMonthContainer, StyledRoot, StyledSelect
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import { ORIENTATION } from './constants.js';
+import { DENSITY, ORIENTATION } from './constants.js';
 
 var Calendar = /*#__PURE__*/function (_React$Component) {
   _inherits(Calendar, _React$Component);
@@ -408,10 +408,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           "aria-roledescription": translations.ariaRoleDescCalMonth,
           "aria-multiselectable": _this.props.range || null,
           onKeyDown: _this.onKeyDown
-        }, calendarContainerProps), /*#__PURE__*/React.createElement(Month, {
+        }, calendarContainerProps, {
+          $density: _this.props.density
+        }), /*#__PURE__*/React.createElement(Month, {
           adapter: _this.props.adapter,
           date: monthDate,
           dateLabel: _this.props.dateLabel,
+          density: _this.props.density,
           excludeDates: _this.props.excludeDates,
           filterDate: _this.props.filterDate,
           highlightedDate: _this.state.highlightedDate,
@@ -693,6 +696,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(Root, _extends({
+          $density: _this2.props.density,
           "data-baseweb": "calendar",
           role: "application",
           "aria-roledescription": "datepicker",
@@ -722,6 +726,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Calendar, "defaultProps", {
   autoFocusCalendar: false,
   dateLabel: null,
+  density: DENSITY.default,
   excludeDates: null,
   filterDate: null,
   highlightedDate: null,

package/esm/datepicker/constants.js

@@ -20,4 +20,9 @@ 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];
+export var DENSITY = {
+  high: 'high',
+  default: 'default'
+};